Switch

Version - 0.0.5

A control that allows the user to toggle between checked and not checked.

Installation

npm install @volta/switch

Usage

import { Switch } from '@volta/switch';

<Switch />

Examples

Sizes

The Switch component comes with 4 different sizes that you can change using the size prop.

import { Switch } from '@volta/switch';
 
export function SwitchSizes() {
  return (
    <div>
      <Switch size="sm" />
      <Switch size="md" />
      <Switch size="lg" />
      <Switch size="xl" />
    </div>
  );
}

Colors

The Switch component comes with 7 different colors that you can change using the color prop.

import { Switch } from '@volta/switch';
 
export function SwitchColors() {
  return (
    <div>
      <Switch color="primary" />
      <Switch color="brand" />
      <Switch color="tertiary" />
      <Switch color="dense" />
      <Switch color="success" />
      <Switch color="warning" />
      <Switch color="alert" />
    </div>
  );
}

Disabled

With label

Airplane Mode

Switch Props

The following props are available for switch component. These are the custom props that we've added for the switch component and you can use all the other native props as well.

Attribute	Type	Description	Default
`size`	Size	Change switch size	`md`
`className`	`string`	Add custom className for switch	`''`

Status Table