Alert

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

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>

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">Generate</Link>,
    <Link variant="plain">Skip for now</Link>,
  ]}
>
  Don't forget to generate the new theme definition after updating to our latest
  release.
</Alert>

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>

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.

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>

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