Card

Data · Badge, Button, Card, IconButton, Stagger, TintIcon

PreviewCode

Welcome flow for new workspace admins.

Mara Ellis12 steps348 users

Live

New tiers and a comparison table for annual plans.

86 viewing

Net-30 passed four days ago; reminder bounced.

Rui CostaHigh priority

Open

Props

Prop	Type	Notes
`tone?`	`Tone`
`dot?`	`boolean`
`live?`	`boolean`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`variant?`	`"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"`
`size?`	`"md" \| "sm"`
`icon?`	`IconName`
`iconRight?`	`IconName`
`disabled?`	`boolean`
`type?`	`"button" \| "submit"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`title?`	`string`
`description?`	`string`
`meta?`	`string[]`
`corner?`	`ReactNode`
`status?`	`ReactNode`
`actions?`	`ReactNode[]`
`tint?`	`Tint \| "surface"`
`onClick?`	`() => void`
`children?`	`ReactNode`
`eyebrow?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`icon`	`IconName`	Required
`label`	`string`	Required
`variant?`	`"soft" \| "solid" \| "outline" \| "ghost"`
`size?`	`"sm" \| "md" \| "lg"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`disabled?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`icon`	`IconName`	Required
`tint?`	`Tint \| "plain"`
`label?`	`string`
`size?`	`number`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.