Home

Foundations

Components

Sections

Templates

Components

Accordion

Alert

Avatar

Badge

Banner

Breadcrumbs

Button

Button group

Button icon

Button Pill

Footer

Form

Header

Help text

Modal

Spinner

Status indicator

Table

Tabs

Toast

Toggle

Tooltip

Alert

Inline messages that surface important information, warnings, errors, or success states right where the user needs them.

Status

Info alert

Communicates neutral or helpful information that does not require immediate action.

Button 1

Button 2

Warning alert

Draws attention to a potential issue or risk that may need user awareness or caution.

Button 1

Button 2

Error alert

Indicates a critical problem or failure that requires user action to resolve.

Button 1

Button 2

Success alert

Confirms that an action or process was completed successfully.

Button 1

Button 2

Heading

Show heading

Use the heading to provide clear context for the alert.

Button 1

Button 2

And hide it when the message is brief and self-explanatory.

Button 1

Button 2

Use a minimal alert without a heading or actions when the message alone is sufficient for user understanding and no interaction is required.

Actions

Show actions

Show actions when the alert requires user decisions or follow-up.

Button 1

Button 2

Hide actions

And hide them when the message is purely informational.

Hide button 2

Hide the second button when a single clear action is sufficient to resolve or dismiss the alert.

Button 1

Show leading icon

Show a leading icon in the button when it helps clarify the action’s purpose or adds quick visual recognition.

Button 1

Show trailing icon

Show a trailing icon in the button when it indicates direction, progression, or an external link.

Button 1