Alert

Works with any type of content
Comes in 4 different colors
Supports horizontal layout direction
Similar components:
Frame
Card


Usage

Alert is a composition of multiple other components available through its properties:

  • Icon is optional. Can render any vector object.
  • Title and body text are optional, but we recommend displaying either a compbination of title and body text or one of them.
  • Actions are optional links.

All components come with one predefined size and can not be changed. For smaller alert footprint, see inline layout direction.

Actions

Alert supports rendering one or multiple action elements. You can pass either a single component or an array of components to the actionsSlot property. Alert automatically adds a standard gap between the passed elemenets.

Colors

Alert comes in 4 different colors with neutral being the default one. Other colors are usually used to convey the status of the page area or promote your content.

Layout direction

Alert supports switching layout direction to horizontal with inline property. It can come handy when you want to save content space and/or display Alert actions on the end side.

Make sure not to use too many actions when using inline property since it will leave less space available for the main content area. Ideally there should be just one action in this case.

Bleed

There is an opportunity to save space on mobile viewports by making the Alert full width. Alert supports bleed property to avoid layout complexities that remove side borders and apply the negative margin multiplier you pass to it. Like most other layout properties, the bleed property is responsive, so you can easily control how your Alert behaves on every viewport size.

For example, the second Alert here uses x4 bleed on small and medium screens but renders normally for large and extra-large screens.

Accessibility

Alert automatically assigns its role and gets announced by screen readers when it gets rendered on the screen.

Properties

Name
Type
icon
React.Component
title
React.ReactNode
children
React.ReactNode
actionsSlot
React.ReactNode
color
neutral
primary
positive
critical
inline
boolean
bleed
number
className
Array<
string
undefined
null
false
>
attributes
object
Previous
Next