A subscribe toggle with a bell that swings on two coupled springs.
FreeWeb and Mobile3 variantsMotion
Preview
npx shadcn add @fetaui/bell-buttonPlayground
Off
On
Disabled
Variant
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/bell-button
Off
Default and Compact show the label. Icon shows the bell alone and uses label as its name.
Motion
Accessibility
- A native button with aria-pressed.
Motion
- Turning on tilts the bell −12° and swings it back on two springs.
- With reduced motion, the bell does not swing.
- Swift uses one spring.
Responsive behavior
- Height steps up on Mobile through the size tokens.
Performance
- The swing runs only when turning on, as two springs set directly on the bell and clapper, with no React render per frame.
- The width change uses a Motion layout animation, skipped when still.
- The ring timer clears on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/bell-button.
- Pass pressed and onPressedChange to control it, or defaultPressed to seed it.
- variant is default, compact or icon. Icon has no visible text, so label is its accessible name.
- Set label and pressedLabel for other actions, such as Follow and Following.
- The demo changes local state only. Save the subscription in onPressedChange.
Related
ToggleComponentA button that stays pressed.Save ButtonComponentA bookmark that files into collections.Vote ButtonComponentA chevron over a count. Voting inverts the tile and rolls the count up by one.SwitchComponentTurns a setting on or off and applies it at once.Icon ButtonComponentThe round sibling of Button, for an action one icon can explain.