Alert

Import
import { Alert } from "reshaped";
import type { AlertProps } from "reshaped";
Related components
Storybook
Works with any type of content
Comes in 4 different colors
Supports horizontal layout direction


Usage

Alert is a composition of multiple other components defined by its properties. You can render title and text content separately and pass an optional icon to optionally render it on the side.

<Alert title="Update your theme" icon={IconZap}>
Don't forget to generate the new theme definition after updating to our latest
release.
</Alert>

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.

<Alert
title="Update your theme"
icon={IconZap}
actionsSlot={[
<Link variant="plain" key="generate">
Generate
</Link>,
<Link variant="plain" key="skip">
Skip for now
</Link>,
]}
>
Don't forget to generate the new theme definition after updating to our latest
release.
</Alert>

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.

<View gap={3}>
<Alert title="Unexpected error happened" icon={IconZap} color="critical">
We have encountered an error while making a request. Please try again later.
</Alert>
<Alert title="You are all set" icon={IconZap} color="positive">
We are processing your data but you can already start using our service.
</Alert>
<Alert title="Release highlights" icon={IconZap} color="primary">
This release comes with 3 new components that you can start using
immediately.
</Alert>
</View>

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.

<Alert
inline
title="Update your theme"
icon={IconZap}
actionsSlot={<Link variant="plain">Generate</Link>}
>
Don't forget to generate the new theme definition after updating to our latest
release.
</Alert>

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.

<View gap={3}>
<Alert bleed={4}>
<Placeholder />
</Alert>
<Alert bleed={{ s: 4, l: 0 }}>
<Placeholder />
</Alert>
</View>

Accessibility

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

Previous
Next