Alert

Severities

Dismissible

Without Title

Alerts display brief messages for the user without interrupting their use of the app.

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintAlert } from '@getufy/flint-ui';

html

<flint-alert></flint-alert>

Property	Attribute	Type	Default	Description
`severity`	`severity`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	The severity level of the alert.
`variant`	`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	—	Alias for `severity`. Visual style variant.
`title`	`title`	`string`	`''`	An optional title for the alert.
`dismissible`	`dismissible`	`boolean`	`false`	Whether the alert can be dismissed by the user.
`closable`	`closable`	`boolean`	—	Alias for `dismissible`. Whether the alert can be closed.

Event	Detail	Description
`flint-alert-close`	`{ open: false, severity: string }`	Fired when the alert's close button is clicked. detail: `{ open: false, severity: string }`

Name	Description
`(default)`	The message content of the alert.
`icon`	Optional icon to display instead of the default severity icon.

Name	Description
`base`	The component's base wrapper element.
`close-button`	The close button element.
`icon`	The icon container.
`message`	The message content area.
`title`	The title element.

Alert ​