Astra

Bell Toggle

Pill toggle where a press rings the bell, crossfades the label and unfurls the pill.

Bell Toggle, a Astra component

Use Bell Toggle in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/BellToggle-TS-TW
How to install Astra components

Related components

  • Spring Check

    Checkbox row where one spring fills the box, draws the tick and strikes through the label.

  • Slide Commit

    Slide-to-confirm handle that spins while your action runs and unfurls into a done pill.

  • Voice Pill

    Mic button that swells into a capsule of live equalizer bars and a timer while recording.