Toggle

A two-state button that can be either on or off.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/toggle.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Default Variant

Outline Variant

Sizes

With Text

Disabled

Usage

How to use this component in your code.

{/* Variants */}
<Toggle><Bold /></Toggle>
<Toggle variant="outline"><Bold /></Toggle>

{/* Sizes */}
<Toggle size="sm"><Bold /></Toggle>
<Toggle size="default"><Bold /></Toggle>
<Toggle size="lg"><Bold /></Toggle>

{/* With Text */}
<Toggle><Bold /> Bold</Toggle>

{/* Disabled */}
<Toggle disabled><Bold /></Toggle>