Skip to content

Alert ​

Severities

Loading...

Dismissible

Loading...

Without Title

Loading...

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

  • Tag: <flint-alert>
  • Class: FlintAlert

Import ​

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

Usage ​

html
<flint-alert></flint-alert>

Properties ​

PropertyAttributeTypeDefaultDescription
severityseverity'info' | 'success' | 'warning' | 'error''info'The severity level of the alert.
titletitlestring''An optional title for the alert.
dismissibledismissiblebooleanfalseWhether the alert can be dismissed by the user.

Events ​

EventDetailDescription
flint-alert-close—Fired when the alert's close button is clicked.

Slots ​

NameDescription
(default)The message content of the alert.
iconOptional icon to display instead of the default severity icon.

CSS Custom Properties ​

PropertyDefault
--flint-font-family—
--flint-border-radius-md—
--flint-info-bg—
--flint-info-border-color—
--flint-info-text-color—
--flint-info-icon-color—
--flint-success-bg—
--flint-success-border-color—
--flint-success-text-color—
--flint-success-icon-color—
--flint-warning-bg—
--flint-warning-border-color—
--flint-warning-text-color—
--flint-warning-icon-color—
--flint-error-bg—
--flint-error-border-color—
--flint-error-text-color—
--flint-error-icon-color—
--flint-active-color—