Toggle

Version - 0.0.5

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

Installation

npm install @volta/toggle

Usage

import { Rwe126 } from '@volta/iconography';
import { Toggle } from '@volta/toggle';

<Toggle aria-label="Toggle">
  <Rwe126 />
</Toggle>

Examples

Sizes

The Toggle-Button component comes with 4 different sizes that you can change it using the size prop.

Variants

Outline

Colors

The Toggle component comes with 8 different colors that you can change it using the color prop.

import { Toggle } from '@volta/toggle';
 
export function ToggleColorVariants() {
  return (
    <div>
      <Toggle aria-label="Toggle" variant="outline" color="brand">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="primary">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="secondary">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="tertiary">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="dense">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="success">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="warning">
        <Rwe126 />
      </Toggle>
      <Toggle aria-label="Toggle" variant="outline" color="alert">
        <Rwe126 />
      </Toggle>
    </div>
  );
}

Toast Toggle Group