Alert

Alerts are used to communicate a state that affects a system, feature or page.

Import#

Rock UI exports 4 alert related components.

  • Alert: The wrapper for alert components.
  • AlertIcon: The visual icon for the alert that changes based on the status prop.
  • AlertTitle: The title of the alert to be announced by screen readers.
  • AlertDescription: The description of the alert to be announced by screen readers.

Usage#

Editable Example

Status#

Change the status of the alerts by passing the status prop. This affects the color scheme and icon used. Alert supports error, success, warning, and info statuses.

Editable Example

Variant#

Alert has 4 variant styles you can use. Pass the variant prop and use either subtle, solid, left-accent or top-accent.

Editable Example

Composition#

Alert ships with smaller components to allow for flexibility in creating all kinds of layouts. Here's an example of a custom alert style and layout:

Editable Example

Props#

Alert Props#

Alert is the wrapper for alert component. It composes the Flex component.

NameTypeDefaultDescription
statuserror, success, warning, infoinfoThe status of the alert
variantsubtle, solid, left-accent, top-accentsubtleThe variant of the alert style to use.

AlertIcon Props#

AlertIcon composes Icon and changes the icon based on the status prop.

AlertTitle Props#

AlertTitle composes the Box component.

AlertDescription Props#

AlertDescription composes the Box component.

Edit this page

Made byChakraandRock Content