Toggle Group

Version - 0.0.5

A set of two-state buttons that can be toggled on or off.

Installation

npm install @volta/toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from '@volta/toggle-group';
import { Rwe10, Rwe11, Rwe12 } from '@volta/iconography';

<ToggleGroup type="multiple" size="sm" variant="outline">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Rwe10 />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Rwe11 />
  </ToggleGroupItem>
  <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
    <Rwe12 />
  </ToggleGroupItem>
</ToggleGroup>

Examples

Sizes

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

Small

Medium

Large

X-Large

Types

The type prop determines whether a single or multiple items can be pressed at a time.

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 ToggleGroupColorVariants() {
  return (
    <ToggleGroup color="brand">...</ToggleGroup>
    <ToggleGroup color="primary">...</ToggleGroup>
    <ToggleGroup color="secondary">...</ToggleGroup>
    <ToggleGroup color="tertiary">...</ToggleGroup>
    <ToggleGroup color="dense">...</ToggleGroup>
    <ToggleGroup color="success">...</ToggleGroup>
    <ToggleGroup color="warning">...</ToggleGroup>
    <ToggleGroup color="alert">...</ToggleGroup>
  )
}

Toggle Tooltip