Skip to content
Twentyfirst UIHalo

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.

AppearanceTheme and density for this browser.
NotificationsWhat reaches your phone.
API keyUsed by the CLI.
hq_••••••••9c1e

Props

Button

PropTypeNotes
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?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

SecretField

PropTypeNotes
prefix?string
last4?string
value?string
meta?ReactNode
onReveal?() => boolean | Promise<boolean>
onCopy?() => void
onRotate?() => void
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Segmented

PropTypeNotes
options(string | Option)[]Required
value?string
defaultValue?string
onChange?(v: string) => void
size?"sm"
block?boolean
label?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

SettingsLayout

PropTypeNotes
sections{ id?: string; title: ReactNode; text?: ReactNode; badge?: ReactNode; children?: ReactNode; }[]Required
footer?ReactNode
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Switch

PropTypeNotes
checked?boolean
defaultChecked?boolean
onChange?(e: ChangeEvent<HTMLInputElement>) => void
children?ReactNode
spread?boolean
disabled?boolean
label?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.