Notify Button
betaA “notify me” toggle: the bell rings and the label grows elastically into the confirmation.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add notify-buttonnpm packages installed: class-variance-authority.
import { NotifyButton } from "@/components/ui/notify-button";Default
Gallery
Custom Icon
<NotifyButton>
| Prop | Type | Default |
|---|---|---|
activeLabelShown while on. | ReactNode | "You’ll be notified" |
announcementAnnounced when turned on. Defaults to | string | — |
defaultPressedInitial state when uncontrolled. | boolean | false |
iconThe glyph that rings. Defaults to a bell. | ReactNode | — |
labelResting label, and the button's accessible name. | ReactNode | "Notify me" |
onPressedChange | (pressed: boolean) => void | — |
pressedControlled state. | boolean | — |
stroke | boolean | — |
A toggle button exposed with aria-pressed. Its accessible name stays the resting label — the confirmation label is aria-hidden — and the confirmation is announced once through a polite live region when it turns on. The bell is decorative; its ring and the width spring stop under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes