Alert

<View width="400px" maxWidth="100%">
  <Alert
    title="New version is available" icon={IconZap} actionsSlot={<View backgroundColor="neutral-faded" height={10} />} color="primary"
    actionsSlot={<Link variant="plain">View now</Link>}
 >
    Find out which new features are available in the upcoming Reshaped release
  </Alert>
</View>

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={IconZap}>
  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={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>

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={IconZap} 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={IconZap}
    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={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>

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={IconZap}
  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.

<View gap={3}>
  <Alert bleed={4} title="Update your theme">
    Don't forget to generate the new theme definition after updating to our
    latest release.
  </Alert>
</View>

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 }} />

• Alert automatically assigns its role and is announced by screen readers when rendered on the screen.
• In colored alerts, use actions of the same color to avoid color contrast issues.