Now that we have our variants out of the way, let’s focus on adding the content options for our alert which will enable us to provide our own:

• Icon

• Headline

• Message

Icon Content

We kind of already have our icon conditionally added via our showIcon variable, but we can make this a lot better by instead relying on the existence of a slot.

We can conditionally check whether a slot is provided by checking for its existence on the $slots property of our component’s state. For example, we’ll be calling our icon slot icon, so we can check for its existence using $slots.icon.