Components

Toggles

A set of buttons that can be toggled between states.

Import Toggle

Tremor exports two components to build a Toggle.

import { Toggle, ToggleItem } from "@tremor/react";

Usage example

The example below shows different toggles created with Toggle and ToggleItem components.

import { Toggle, ToggleItem } from "@tremor/react";
import {
  CheckIcon,
  CollectionIcon,
  ReceiptRefundIcon,
  ViewListIcon,
  ChartPieIcon,
} from "@heroicons/react/outline";

export default () => (
  <>
    <Toggle defaultValue="1" onValueChange={(value) => console.log(value)}>
      <ToggleItem value="1" text="All" icon={CollectionIcon} />
      <ToggleItem value="2" text="Succeeded" icon={CheckIcon} />
      <ToggleItem value="3" text="Refunded" icon={ReceiptRefundIcon} />
    </Toggle>
    <Toggle
      color="zinc"
      defaultValue="1"
      onValueChange={(value) => console.log(value)}
    >
      <ToggleItem value="1" text="Absolute" />
      <ToggleItem value="2" text="Relative" />
    </Toggle>
    <Toggle
      color="zinc"
      defaultValue="1"
      onValueChange={(value) => console.log(value)}
    >
      <ToggleItem value="1" icon={ChartPieIcon} />
      <ToggleItem value="2" icon={ViewListIcon} />
    </Toggle>
  </>
);

Controlled state example

The example below shows a Toggle with a controlled state.

import { useState } from "react";
import { Toggle, ToggleItem } from "@tremor/react";

export default () => {
  const [value, setValue] = useState(null);

  return (
    <Toggle value={value} onValueChange={setValue}>
      <ToggleItem value="1" text={"Five"} />
      <ToggleItem value="2" text={"Three"} />
      <ToggleItem value="3" text={"One"} />
    </Toggle>
  );
};

API Reference: Toggle

client component

defaultValueoptional
Description: Sets the default selected toggle item in an uncontrolled setting.
Type: string
Default
Values: E.g. '1'

valueoptional
Description: The controlled state of a Toggle. Must be used in conjunction with onValueChange.
Type: string
Default
Values: E.g. '1'

onValueChangeoptional
Description: Event handler called when the state of the toggle changes.
Type: function
Default
Values

coloroptional
Description: Set the color of the active toggle.
Type: string
Default: blue
Values: See color section

Properties ToggleItem

client component

value
Description: Assigns a value to a toggle, which is used in the parent component to idenify the item.
Type: string
Default
Values: E.g. '1'

textoptional
Description: Displayed toggle text.
Type: string
Default
Values

iconoptional
Description: Set an icon left to the toggle text.
Type: React.ElementType
Default
Values

Text Tracker