Skip to main content Skip to navigation Skip to search

Alert

Alert Properties

Name Type Description
size default | sm
closable boolean If false, the alert will not render the close button. Lightweight alerts do not display close buttons
status neutral | info | success | warning | danger | alt | loading
i18n { closeButtonAriaLabel: string; loading: string; info: string; success: string; warning: string; danger: string; }

Alert CSS Properties

Name
--color
--background
--border-radius
--border-color
--icon-color
--close-icon-color
--close-icon-color-hover

Alert Events

Name Desription
closeChange notify when the user has clicked the dismiss button

Alert Slots

Name Description
Content slot for inside the alert

Alert Actions

Alert Actions CSS Properties

Name
--action-text-color
--action-hover-text-color
--action-font-size

Alert Actions Slots

Name Description
Content slot for inside the alert

Alert Group

Alert Group Properties

Name Type Description
size default | sm
type default | banner | light
role string Autosets the alert groups aria role to 'region'
status neutral | info | success | warning | danger | alt | loading

Alert Group CSS Properties

Name
--color
--icon-color
--icon-size
--font-size
--font-weight
--letter-spacing
--padding
--background
--border-color
--border-width
--border-radius

Alert Group Slots

Name Description
Content slot for the alerts