Alert

import { Alert } from 'yarcl';

Trial ends in 3 days

Add a payment method to keep your projects.

Upgrade

Your changes were saved.

Payment failed

The card was declined.

Outline variant

<Alert
  color="warning"
  title="Trial ends in 3 days"
  icon={<InfoIcon />}
  action={<Button size="sm" color="warning">Upgrade</Button>}
  onDismiss={() => setOpen(false)}
>
  Add a payment method to keep your projects.
</Alert>

For messages that come and go, use Toast.

Accessibility

An alert that’s on the page when it loads shouldn’t interrupt screen readers, so it has no live role by default. When an alert appears in response to something, set live: 'polite' (role="status") or 'assertive' (role="alert").

Props

Prop	Type	Default	Description
action	ReactNode		Actions shown after the text, e.g. a Button or Link.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
icon	ReactNode		Icon shown before the text.
live	'assertive' | 'polite'		Announces the alert when it appears: 'polite' (role="status") or 'assertive' (role="alert"). Leave unset for messages present on page load.
onDismiss	() => void		Shows a dismiss button. Called when it is pressed; hide the alert in response.
radius	Radiusconfig	config.defaults.radius	Corner radius, from the radii config.
title	ReactNode		Bold first line.
variant	Variantconfig	config.defaults.softVariant	Style recipe, from the variants config.