Bell Toggle

Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label through a clip-path on a critically damped spring. The pressed state is the receipt.

Default

Press the pill. Once it is on, new notifications roll the badge and wobble the bell. A keyboard toggle only crossfades.

Customize

Text

Background

Pressed Text

Pressed Background

Size

Radius22px

Ring Amplitude17°

Ring Passes5

Ring Decay1

Ring Duration820ms

Ring Pivot16%

Crossfade200ms

Reveal Bounce0

Badge

Badge Color

WavesClapperOff LabelOn LabelDisabled

API Reference

BellToggle

Prop	Type	Default	Description
`offLabel`	`string`	`'Notify me'`	The face at rest. Its width sets how far the pill is clipped.
`onLabel`	`string`	`"You'll be notified"`	The face after the yes press. The pill reserves the width of the longer label; only the visible part changes, so neighbours never shift.
`label`	`string`	`undefined`	Constant accessible name. Falls back to offLabel.
`color`	`string`	`'#f5f5f5'`	Ink at rest: label, bell and hover tint.
`background`	`string`	`'#27272a'`	Pill fill at rest.
`onColor`	`string`	`'#18181b'`	Ink when pressed.
`onBackground`	`string`	`'#f5f5f5'`	Fill when pressed.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	36, 44 or 52 pixels tall with matching type, icon and padding.
`radius`	`number`	`22`	Corner radius of the pill and of the clip cap.
`ringAmplitude`	`number`	`17`	Degrees of the first swing. Every later swing scales from it.
`ringPasses`	`number`	`5`	Half-swings before rest. 2 is a nod, 9 a peal.
`ringDecay`	`number`	`1`	How fast the swings die. 1 evenly, 2 the second is already small, 0.5 keeps shaking.
`ringDuration`	`number`	`820`	Milliseconds for the whole ring.
`ringPivot`	`number`	`16`	Where the icon hangs from, as a percentage of its height. 16 is the crown, 50 the centre.
`crossfadeMs`	`number`	`200`	The label and fill crossfade. Also all a keyboard toggle gets.
`revealBounce`	`number`	`0`	Overshoot of the unfurl. 0 is critically damped; 0.2 lets the cap pass its mark and return.
`count`	`number`	`0`	Notifications waiting. A rise while on rolls the badge and wobbles the bell.
`badge`	`boolean`	`true`	Show the count on the bell while on.
`badgeColor`	`string`	`'#ef4444'`	The badge.
`badgeTextColor`	`string`	`'#ffffff'`	The count on the badge.
`waves`	`boolean`	`true`	Sound waves leave the rim on every swing.
`clapper`	`boolean`	`false`	Draw a bell with a clapper that swings a beat behind the body.
`pressed`	`boolean`	`undefined`	Controlled state, usable with v-model:pressed. Outside changes only crossfade.
`defaultPressed`	`boolean`	`false`	Initial state when uncontrolled.
`disabled`	`boolean`	`false`	Dims the pill and ignores input. The state is kept.

Event	Description
`update:pressed`	Emitted on every toggle with the new state.
`change`	Same moment as update:pressed.

Slot	Description
`icon`	Replaces the bell. Adjust ringPivot for a glyph that hangs elsewhere.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter` + `Space`	Toggles the pill. A keyboard toggle crossfades without ringing.

A native button with aria-pressed. The visible labels are hidden from screen readers and the accessible name stays constant.
With prefers-reduced-motion the pill, bell and badge only crossfade.

Target Cursor Branched Menu