Alert

Alert is an inline component used for displaying different types of messages. For accessibility reasons, alert should appear close to the element that triggered it.

Props

prop	type	default
variant	"negative" \| "positive" \| "warning" \| "info"	-
show	boolean	false
role	string	"alert"

Visual Options

This is "info" variant of the alert element

With an additional description

This is "info" variant of the alert element

With an additional description

This is "info" variant of the alert element

With an additional description

And a link to more information

This is "info" variant of the alert element

With an additional description

And a link to more information

This is "info" variant of the alert element

With an additional description

And a link to more information

This is "info" variant of the alert element

With an additional description

And a link to more information

Accessibility

Use the ARIA live region role attribute to provide meaning to the alert element (defaults to "alert"). If you want to remove the role from the alert and assign it to its particular child (e.g. title), you can do so by setting role attribute to an empty string on f-alert element and assigning a respective role on the child element. Read more about live region role attribute on MDN.

This is a "info" variant of the alert element

You see this warning because you did something wrong

This is "info" variant of the alert element

With an additional description