Alert
The Alert
component displays a callout for user attention with optional title
, description
, icon
, and button
. It supports different variants for various alert types.
Renamed from Message in Gravity 12.
Preview
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
button | button object | optional | object |
className | custom styles | optional | SCSS or Tailwind object |
description | description text | optional | string |
icon | override the variant icon | optional | string |
title | title text | optional | string |
variant | alert type | required | string (info/success/warning/error) |
Example
Blank Slate Message
Depreciated in v12.
Blank slate messages are used when there is no data to display and prompts the user to take action.
Props
Prop | Description | Required | Value |
---|---|---|---|
action | callback executed on button click | optional | function |
buttonText | button label | optional | string |
marginLeft | offset the left margin | optional | string |
marginTop | offset the top margin | optional | string |
text | message body | required | string |
title | message title | optional | string |
Notes
The
variant
prop determines the styling and default icon for the alert.Custom styles can be applied using the
className
prop.The
button
prop accepts an object with button properties to render a button within the alert.For more details, refer to the Shadcn Alert documentation.
Last updated