Alert

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

To provide non-disruptive, low-priority feedback after an action has taken place, use the toast component.

For critical messages requiring immediate action, use an alert dialog.

Import

• 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.

import { Alert, AlertIcon, AlertTitle, AlertDescription } from '@outfitio/outkit';

Usage

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.

Variant

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

Composition

Alert ships with smaller component to allow for flexibility and make it easy to create all kinds of layout. Here's an example of custom alert style and layout.

Best Practice

Alerts should:

• Use concise and scannable language
• Be placed in the appropriate context:
  • Alerts relevant to an entire page should be placed at the top of that page, below the page header.
  • Banners related to a section of a page (like a card, popover, or modal) should be placed inside that section, below any section heading.
  • Banners related to a specific element more specific should be placed immediately above or below that element.
• Focus on a single piece of information
• Be closeable unless they contain critical information
• Use the default icon for success, info, warning and error statuses.

Props

Alert Props

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

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.