Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component Alert

Alerts let the user know of things such as updates and emergency information through a banner that runs across the top of the screen. They can be coded as to be dismissible by the user.

Get the UI kit

Example

This is an important message that your user should know about.Let the user know that they successfully accomplished a task.Warn the user about something.Inform the user about an error that has occurred.
<som-alert type="info" headline="Informational alert" dismissible="true">
  This is an important message that your user should know about.
</som-alert>
<som-alert type="success" headline="Success alert" dismissible="true">
  Let the user know that they successfully accomplished a task.
</som-alert>
<som-alert type="warning" headline="Warning alert" dismissible>
  Warn the user about something.
</som-alert>
<som-alert type="error" headline="Error Alert">
  Inform the user about an error that has occurred.
</som-alert>

Props

AttrTypeDefaultDocs

dismissible

boolean

false

This property determines if an alert can be dismissed.

headline

string

This property sets the headline of the alert.

hidden

boolean

false

This boolean sets the initial state of alert.

no-icon

boolean

false

This boolean sets whether to include an icon or not.

type

"error" | "info" | "success" | "warning"

'success'

This property styles the component which includes color and default icon.

Methods

NameReturnsDocs

hide

Promise will resolve after alert is hidden.

This public method is used to hide an alert.

show

Promise will resolve after alert is shown.

This public method is used to show an alert.

Events

EventDetailDocs

somDismissed

void

This event is emitted when the alert is dismissed.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source