Skip to content

Alert - Web Component

The Alert component can be used imported from:

Playground

Parameters

...

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
confirmvoidFired when the user confirms the alert.
closevoidFired when the user closes the alert.

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspan
confirm-textspan

Parameters use

config

The config attribute is used to set the state of the alert. Possible values are: info, alert, negative and positive.

This is an info alertThis is an alert alertThis is a negative alertThis is a positive alert

content

The thing to be assigned to the alert. It uses the default slot too.

Alert content

icon

The icon attribute is used to set the icon of the alert. Check the icon list here. This attribute will receive the name of the icon to be show. You can use both solid or line (outlined) version.

Alert content

confirm-text

The confirm-text attribute is used to set the text of the confirm button.

This is an info alert

You can also use the confirm-text slot:

This is an info alert OK

hide-close

The hide-close attribute is used to hide the close button.

This is an info alert

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example