Modus UI

Chime Switch

Web (React)

A square-shouldered subscribe switch whose bell chimes as it flips to the theme ink.

Chime Switch is a subscribe toggle: switching it on fills it with the theme's primary ink, swings the bell in a decaying chime and shows a count badge. It is a real switch with aria-checked, so keyboard and screen readers treat it as one.

Modus / Chime Switch

Installation

CLI

npx @modus-ui/cli add chime-switch

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/chime-switch.tsx.
  3. Paste the code.

Usage

tsx
import { ChimeSwitch } from "@/components/ui/chime-switch";

export default function Example() {
  return <ChimeSwitch />;
}

Props

PropTypeDefaultDescription
offLabelstring"Keep me posted"Label while off.
onLabelstring"On the list"Label while on.
iconany-Replaces the bell.
labelany-Replaces both labels.
colorstring"hsl(var(--foreground))"Text colour while off.
backgroundstring"hsl(var(--muted))"Background while off.
onColorstring"hsl(var(--primary-foreground))"Text colour while on.
onBackgroundstring"hsl(var(--primary))"Background while on.
sizestring"md"Size: "sm", "md" or "lg".
radiusnumber8Corner radius in pixels.
ringAmplitudenumber17First swing angle in degrees.
ringPassesnumber5Number of swings.
ringDecaynumber1How quickly swings shrink.
ringDurationnumber820Chime duration in milliseconds.
ringPivotnumber16Swing pivot, as a percentage from the bell top.
crossfadeMsnumber200Label and colour crossfade in milliseconds.
revealBouncenumber0Spring bounce of the label and badge.
countnumber3Number shown in the badge.
badgebooleantrueShows the badge while on.
badgeColorstring"hsl(var(--destructive))"Badge background.
badgeTextColorstring"hsl(var(--destructive-foreground))"Badge text colour.
wavesbooleantrueShows sound waves while ringing.
clapperbooleantrueDraws the swinging clapper.
pressedany-Controlled state.
defaultPressedbooleanfalseInitial state when uncontrolled.
onChangeany-Called with the new state.
disabledbooleanfalseDisables the switch.

Comments

  • No comments yet.