Alert

A brandless status notification container wrapping a <div role="alert">. The role attribute identifies the element as an ARIA live region — screen readers announce its content when it appears. All visual styling is driven by CSS custom properties.

Demo

Your changes have been saved.

Usage


import { Alert } from '@froglet/ui'
 
<Alert>Your changes have been saved.</Alert>
 
// Lower urgency
<Alert role="status">Loading complete.</Alert>
 
// Themed with a modifier class
<Alert className="alert--success">Your changes have been saved.</Alert>
<Alert className="alert--error">Something went wrong. Please try again.</Alert>

Props

Prop	Type	Description
`children`	`ReactNode`	Alert content.
`className`	`string`	Additional CSS classes. Use to apply a token block.
`role`	`string`	ARIA role. Defaults to `"alert"`. Override with `"status"` for lower urgency.
`ref`	`React.Ref<HTMLDivElement>`	Forwarded to the underlying `<div>`.
`...props`	`HTMLAttributes<HTMLDivElement>`	All standard div attributes.

CSS Custom Properties

Token	Default	Description
`--alert-padding`	`0.75rem 1rem`	Inner spacing.
`--alert-background-color`	`#f9fafb`	Background fill.
`--alert-text-color`	`#374151`	Text color.
`--alert-border-width`	`1px`	Border width.
`--alert-border-style`	`solid`	Border style.
`--alert-border-color`	`#e5e7eb`	Border color.
`--alert-border-radius`	`4px`	Corner rounding.

Accessibility

role="alert" marks the element as an ARIA live region with aria-live="assertive". Screen readers interrupt the user to announce the content when it is inserted into the DOM.
Use role="status" for non-urgent status messages that should not interrupt.
Do not use Alert as a decorative container — only when the content is a genuine notification.