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";
Anatomy
How the basic component is pieced together displaying all properties with their default values.
import { Toggle, ToggleItem } from "@tremor/react"; export default () => ( <Toggle defaultValue={undefined} value={undefined} onValueChange={undefined} color="blue" marginTop="mt-0" > <ToggleItem value={undefined} text="" icon={undefined} /> </Toggle> );
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 1 */} <Toggle defaultValue={1} handleSelect={(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 2 */} <Toggle color="zinc" defaultValue={1} handleSelect={(value) => console.log(value)} > <ToggleItem value={1} text="Absolute" /> <ToggleItem value={2} text="Relative" /> </Toggle> {/* toggle 3 */} <Toggle color="zinc" defaultValue={ 1 } handleSelect={ (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={5} text={'Five'} /> <ToggleItem value={3} text={'Three'} /> <ToggleItem value={1} text={'One'} /> </Toggle> ); }
API Reference: Toggle
- defaultValueoptional
- Description
- Sets the default selected toggle item in an uncontrolled setting.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- valueoptional
- Description
- The controlled state of a Toggle. Must be used in conjunction with onValueChange.
- Type
- any
- 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
- marginTopoptional
Properties ToggleItem
- value
- Description
- Assigns a value to a toggle, which is used in the parent component to idenify the item.
- Type
- any
- 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
TextTracker