Alert renders a title, an optional icon and a children slot for the message. You can use the slot for passing text content or other components.
<Alert title="Update your theme" icon={ActivityIcon}>
Don't forget to generate the new theme definition after updating to our latest
release.
</Alert>Alert supports rendering one or multiple actions. You can pass either a single component or an array of components to the actionsSlot property. Alert automatically adds a gap between the passed elements.
<Alert
title="Update your theme"
icon={ActivityIcon}
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>Alert comes in four colors, with neutral as the default. Other colors convey the status of the page area or highlight your content.
<View gap={3}>
<Alert title="Unexpected error happened" icon={ActivityIcon} color="critical">
We have encountered an error while making a request. Please try again later.
</Alert>
<Alert
title="Don't forget to fill in your taxes"
icon={ActivityIcon}
color="warning"
>
We're expecting to hear from you befor the end of December. You can find the
forms below on this page.
</Alert>
<Alert title="You are all set" icon={ActivityIcon} color="positive">
We are processing your data but you can already start using our service.
</Alert>
<Alert title="Release highlights" icon={ActivityIcon} color="primary">
This release comes with 3 new components that you can start using
immediately.
</Alert>
</View>Alert supports switching the layout direction to horizontal using the inline property. This is useful when you want to save space or display Alert actions at the end.
Avoid using too many actions with the inline property, as it reduces space for the main content. Ideally, use only one action in this layout.
<Alert
inline
title="Update your theme"
icon={ActivityIcon}
actionsSlot={<Link variant="plain">Generate</Link>}
>
Don't forget to generate the new theme definition after updating to our latest
release.
</Alert>You can save space in smaller areas by making the Alert full width with the bleed property. This property removes side borders and applies negative margins using a unit design token multiplier.
<Alert bleed={4} title="Update your theme">
Don't forget to generate the new theme definition after updating to our latest
release.
</Alert>Alert supports responsive syntax for the bleed property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.
For example, this Alert uses x4 bleed on small and medium screens but renders normally on large and extra-large screens.
<ActionBar bleed={{ s: 4, l: 0 }} />