Switch

Preview

import Switch from "@repo/ui/Switch";

<Switch />;

Installation

npx the-dig@latest add Switch

Props

Prop	Type	Default
color	"brand" | "info" | "success" | "warning" | "danger" | "gray"	"brand"
size	"xs" | "sm" | "md" | "lg"| "xl"	"md"
className	string	-
Others	InputHTMLAttributes<HTMLInputElement> (e.g. onChange, disabled, etc.)	Document

Colors

Brand

import Switch from "@repo/ui/Switch";

<Switch defaultChecked color="brand" />;

Info

import Switch from "@repo/ui/Switch";

<Switch defaultChecked color="info" />;

Success

import Switch from "@repo/ui/Switch";

<Switch defaultChecked color="success" />;

Warning

import Switch from "@repo/ui/Switch";

<Switch defaultChecked color="warning" />;

Danger

import Switch from "@repo/ui/Switch";

<Switch defaultChecked color="danger" />;

Gray

import Switch from "@repo/ui/Switch";

<Switch defaultChecked color="gray" />;

Sizes

import Switch from "@repo/ui/Switch";

<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />