Panel

Data · EventCard, IconButton, Panel, Tabs

PreviewCode

Schedule

5 items waiting · 2 today

Design reviewWed, Apr 15

Walk through the new billing settings flow.

14:00

Prop	Type	Notes
`kind?`	`"meeting" \| "deadline" \| "review" \| "launch" \| "incident"`
`label`	`string`	Required
`date`	`string`	Required
`time`	`string`	Required
`tint?`	`Tint`
`icon?`	`IconName`
`actions?`	`boolean`
`children?`	`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`	Accessible name and tooltip (`aria-label` and `title`); `aria-label` or `title` override them.
`variant?`	`"soft" \| "solid" \| "outline" \| "ghost"`
`size?`	`"sm" \| "md" \| "lg"`
`type?`	`"button" \| "submit" \| "reset"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`disabled?`	`boolean`
`asChild?`	`boolean`	Render the single child element (a link) with the button's look; the icon is placed inside it.
`children?`	`ReactNode`
`id?`	`string`
`name?`	`string`	Form field name and value, sent with the form when this button submits it.
`value?`	`string`
`form?`	`string`	The id of the form this button belongs to, when it sits outside it.
`title?`	`string`
`tabIndex?`	`number`
`autoFocus?`	`boolean`
`aria-label?`	`string`
`aria-labelledby?`	`string`
`aria-describedby?`	`string`
`aria-expanded?`	`boolean \| "true" \| "false"`	For disclosure and menu triggers: whether what the button controls is open.
`aria-controls?`	`string`
`aria-haspopup?`	`boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"`
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	For toggle buttons.
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`side?`	`boolean`
`title?`	`string`
`subtitle?`	`string`
`action?`	`ReactNode`
`children?`	`ReactNode`
`surface?`	`Surface`	`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`items`	`string[]`	Required
`value?`	`string`
`defaultValue?`	`string`
`onChange?`	`(v: string) => void`
`block?`	`boolean`
`panels?`	`Record<string, ReactNode>`	Content per tab; renders the tab panels under the bar, wired with tab/tabpanel roles.
`label?`	`string`	Accessible name of the tab list.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.