UI kit reference

components/ToggleCard

import { … } from 'zidane-ui'ui/src/components/ToggleCard.tsx

Components#

Renders a switch with a title, badges, a description and a status, and its nested dependent toggles under it.

TypeScript

function ToggleCard(props: ToggleCardProps): Element

Parameters
Name	Type	Description
props	`ToggleCardProps`	Component props.

Element

ToggleCard props
Name	Type	Description
badges?	`ReactNode`	Marks after the title, such as "Experimental".
checked	`boolean`	Whether the toggle is on.
children?	`ReactNode`	Nested dependent toggles, as `nested` cards.
className?	`string`	Extra classes on the card.
description?	`ReactNode`	One or two lines under the title.
disabled?	`boolean`	The toggle cannot change, such as a dependent toggle whose requirement is off.
icon?	`string`	Icon class (`i-ph-*`) before the title.
lead?	`ReactNode`	A visual before the title, such as a `BrandMark`. Takes the place of `icon`.
media?	`ReactNode`	An illustration, such as a small demo: beside the text on a card 600px wide or more, across its top below that. It is decorative: assistive tech skips it, and it must hold nothing to click.
nested?	`boolean`	A dependent toggle inside its parent card: a smaller row.
onChange	`(checked: boolean) => void`	Called with the new state when the card is clicked.
status?	`ReactNode`	Shown before the switch: progress, "Installed", a reason.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title	`ReactNode`	The card's title.

TypeScript

interface ToggleCardProps

ToggleCardProps properties
Name	Type	Description
badges?	`ReactNode`	Marks after the title, such as "Experimental".
checked	`boolean`	Whether the toggle is on.
children?	`ReactNode`	Nested dependent toggles, as `nested` cards.
className?	`string`	Extra classes on the card.
description?	`ReactNode`	One or two lines under the title.
disabled?	`boolean`	The toggle cannot change, such as a dependent toggle whose requirement is off.
icon?	`string`	Icon class (`i-ph-*`) before the title.
lead?	`ReactNode`	A visual before the title, such as a `BrandMark`. Takes the place of `icon`.
media?	`ReactNode`	An illustration, such as a small demo: beside the text on a card 600px wide or more, across its top below that. It is decorative: assistive tech skips it, and it must hold nothing to click.
nested?	`boolean`	A dependent toggle inside its parent card: a smaller row.
onChange	`(checked: boolean) => void`	Called with the new state when the card is clicked.
status?	`ReactNode`	Shown before the switch: progress, "Installed", a reason.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title	`ReactNode`	The card's title.