Settings Layout

Foundations · Button, SecretField, Segmented, SettingsLayout, Switch

Standard settings page: a label column with one sentence on what it does, controls on the right, one row per topic.

Props: sections ({id, title, text, badge, children}), footer. Stacks on narrow screens.

PreviewCode

AppearanceTheme and density for this browser.

SystemLightDark

NotificationsWhat reaches your phone.

Approvals waiting on meWeekly digest

API keyUsed by the CLI.

hq_••••••••9c1e

Props

Prop	Type	Notes
`variant?`	`"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"`
`size?`	`"md" \| "sm"`
`icon?`	`IconName`
`iconRight?`	`IconName`
`disabled?`	`boolean`
`type?`	`"button" \| "submit" \| "reset"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`asChild?`	`boolean`	Render the single child element (a link, a router Link) with the button's look instead of a <button>.
`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
`prefix?`	`string`
`last4?`	`string`
`value?`	`string`
`meta?`	`ReactNode`
`onReveal?`	`() => boolean \| Promise<boolean>`
`onCopy?`	`() => void`
`onRotate?`	`() => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`options`	`(string \| Option)[]`	Required
`value?`	`string`
`defaultValue?`	`string`
`onChange?`	`(v: string) => void`
`size?`	`"sm"`
`block?`	`boolean`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`sections`	`{ id?: string; title: ReactNode; text?: ReactNode; badge?: ReactNode; children?: ReactNode; }[]`	Required
`footer?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`name?`	`string`
`checked?`	`boolean`
`defaultChecked?`	`boolean`
`onChange?`	`(e: ChangeEvent<HTMLInputElement>) => void`
`children?`	`ReactNode`
`spread?`	`boolean`
`disabled?`	`boolean`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.