Alert

import { Alert } from '@yarcl/react';

Trial ends in 3 days

Add a payment method to keep your projects.

Your changes were saved.

Payment failed

The card was declined.

Outline variant

<Alert
  color="warning"
  gap="sm"
  padding="md"
  textStyle="label"
  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.

radius, gap, padding and textStyle use keys from your config and can be set in components.Alert.

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").

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

Props

Prop	Type	Default	Description
`action`	`ReactNode`		Actions shown after the text, e.g. a Button or Link.
`color`	`Color`config	`config.defaults.color`	Semantic color, from the `colors` config.
`dismissLabel`	`string`	`config.labels.dismiss`	Accessible name of the dismiss button.
`gap`	`Responsive<Spacing>`config	`config.components.Alert.gap ?? config.defaults.gap`	Space between the icon, text, action and dismiss button, from the `spacing` config. Accepts a scalar or breakpoint map.
`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.
`padding`	`Responsive<Spacing>`config	`config.components.Alert.padding ?? config.defaults.padding`	Inner spacing, from the `spacing` config. Accepts a scalar or breakpoint map.
`radius`	`Radius`config	`config.defaults.radius`	Corner radius, from the `radii` config.
`textStyle`	`TextStyle`config	`config.components.Alert.textStyle ?? config.defaults.labelStyle`	Typography style, from the `typography.styles` config.
`title`	`ReactNode`		Bold first line.
`variant`	`Variant`config	`config.defaults.softVariant`	Style recipe, from this component's variant map or shared `variants`.