Blocks

Alert

Displays a short, important message that attracts the user's attention.

Usage

Use sui.alert with alert_title and alert_description inside a block.

Heads up!

This is an informational alert message.

sui.alert do
  sui.alert_title "Heads up!"
  sui.alert_description "This is an informational alert message."
end

Variants

Use variant: :destructive to communicate an error or dangerous state.

Something went wrong

Your session has expired. Please sign in again.

sui.alert variant: :destructive do
  sui.alert_title "Something went wrong"
  sui.alert_description "Your session has expired. Please sign in again."
end

With icon

Place sui.icon before the title — the grid layout aligns it automatically.

Heads up!

You can add components to your app using the CLI.

sui.alert do
  sui.icon :"circle-alert"
  sui.alert_title "Heads up!"
  sui.alert_description "You can add components to your app using the CLI."
end

Error

Your payment method could not be processed.

sui.alert variant: :destructive do
  sui.icon :"circle-x"
  sui.alert_title "Error"
  sui.alert_description "Your payment method could not be processed."
end

API

Method	Key args	Default	Description
alert(name)	variant:	:default	Container element. `variant:` is one of `:default` `:destructive`.
alert_title(name)	—	—	Bold, single-line heading for the alert. Accepts a string or block.
alert_description(name)	—	—	Supporting text displayed below the title. Accepts a string or block.