Sajari UI

​

Alert

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

Import

Sajari UI exports 6 alert related components.

  • Alert: The wrapper for alert components.
  • AlertBody: The wrapper for the content of the alert.
  • AlertTitle: The title of the alert to be announced by screen readers.
  • AlertDescription: The description of the alert to be announced by screen readers.
  • AlertActions: A wrapper for any actions for the alert.
  • AlertButton: A button within the alert actions.

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

Change the design of the alert using the variant prop. Currently only 'subtle' is supported as an alternative, which removes the border, padding and shadow.

Editable Example

Props

Alert Props

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

NameTypeDefaultDescription
appearance'error', 'success', 'warning', 'info''warning'The purpose of the alert.
variant'default, 'subtle''default'The variant of the alert.

AlertBody Props

AlertBody composes Box.

AlertTitle Props

AlertTitle composes the Text component.

AlertDescription Props

AlertDescription composes the Text component.

AlertActions Props

AlertActions composes the ButtonGroup component.

AlertButton Props

AlertButton composes the Button component.

NameTypeDefaultDescription
primarybooleanfalseIs the button the primary action.