SettingsSection
A settings section — title, subtitle, and a stack of rows.
The section block from Attio's Settings pages: a 16px/600 title with an optional subtitle and a trailing action, then an evenly-gapped stack of rows (pair with FormField). Compose several inside a settings content pane.
Preview
Time preferences
Manage your time preferences
Usage
import { SettingsSection, FormField, Select, Button } from "crisp";
<SettingsSection
title="Time preferences"
description="Manage your time preferences"
action={<Button intent="neutral" size="sm">Reset</Button>}
>
<FormField label="Preferred timezone" htmlFor="tz">
<Select id="tz" options={[...]} />
</FormField>
</SettingsSection>;API
| Prop | Type | Description |
|---|---|---|
title | ReactNode | Section title. |
description | ReactNode | Subtitle under the title. |
action | ReactNode | Trailing action on the title row. |
children | ReactNode | Section rows (gapped stack). |