Flag

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { Flag, FlagGroup } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
title *	string	—	What happened, in a few words. This is the part that gets read.
description	string	—	One sentence of detail. Leave it out when the title says everything.
appearance	'normal' \| 'info' \| 'warning' \| 'error' \| 'success'	'normal'	Normal for ordinary confirmations. The other four are for messages that carry a state.
actions	ReactNode	—	At most two. A flag may disappear, so nothing behind it can be the only way to do something.
icon	ReactNode	—	Replaces the icon the appearance would choose.

A required prop is marked with an asterisk.

Prop	Type	Default	Description
children *	ReactNode	—	The flags. A group stacks them and handles the order.

What the component does for you, and what it needs from you.

A flag is announced when it appears, since a reader may have their attention elsewhere on the page.
A flag with actions holds focus long enough to use them rather than expiring under the pointer.
In dark the normal flag ground inverts and goes light, because it is an inverse surface in both themes.