Toggle

A toggle button with pressed state.

Use Toggle to express a binary on/off selection as a button.

import { Toggle } from '@tile-ui/react';

export default function ToggleDemo() {
	return (
		<div className="button-group">
			<Toggle>Bold</Toggle>

Registry install

pnpm dlx shadcn@latest add @tile-ui/toggle

Package usage

import { Toggle } from '@tile-ui/react';
 
<Toggle variant="outline">Bold</Toggle>

Highlights

  • Three variants
  • Three sizes
  • Pressed state

Registry dependencies

ItemPurpose
toggleComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Toggle

PropTypeDefault
variant'default' | 'outline' | 'ghost'
size'sm' | 'default' | 'lg'