SettingsGroup · SettingRow
Settings as Notion lays them out: a group's title over a hairline, then a row per setting — its name and what it does on the left, the control on the right. A wide control (a text box) goes under them, and so does every control where there isn't room, except a compact one (a switch, a badge), which stays beside them.
A group of rows
When clients can book
How long before a time clients can still book it, in minutes.
One email each time a client books on your page.
<SettingsGroup title="When clients can book">
<SettingRow
label="Book ahead by"
description="How long before a time clients can still book it, in minutes."
htmlFor="lead"
control={<Input id="lead" type="number" className="w-24" />}
/>
</SettingsGroup>A group that says what it's for
Services
What clients can book with them.
45 min
<SettingsGroup title="Services" description="What clients can book with them.">
<ServicesPicker … />
</SettingsGroup>A group with an action
When the group's things are made somewhere else, a small secondary button at the head's right leads there.
Services
What they do: booking and Okami offer only these.
45 min
<SettingsGroup
title="Services"
description="What they do: booking and Okami offer only these."
action={
<ButtonLink variant="secondary" size="sm" href="/en/services">
Edit services
</ButtonLink>
}
>
<ServicesPicker … />
</SettingsGroup>A compact control, beside its name on a phone too
How Okami talks with you
Warm and brief, or more to the point.
<SettingRow label="Tone" description="Warm and brief, or more to the point." inline control={<Badge variant="muted" size="md">Soon</Badge>} />An account to connect: its states
Your channels
Connect your own professional account: Okami answers the clients who message it and books them with you. Only you see those chats, unless Okami passes one on to the studio.If Instagram leaves you on your feed after you sign in, come back here and connect again.
Okami answers the clients who message @pele.hair and books them with you. Only you see those chats, unless Okami passes one on to the studio.Instagram is connected.
Connect your own professional account: Okami answers the clients who message it and books them with you.That Instagram account is already connected in Okami.
Okami can't answer messages to @pele.hair until you connect it again.
<SettingRow
label="Your Instagram"
description={connected ? "Okami answers … @pele.hair …" : "Connect your own …"}
inline
control={connected
? <Button variant="secondary" size="sm">Disconnect</Button>
: <ButtonLink variant="primary" size="sm" href="/api/instagram/connect?from=mine">Connect Instagram</ButtonLink>}
/>- Not connected, the row says what connecting does and offers Connect; connected, which account Okami answers and Disconnect.
- Connected, your own account also has its own “Chat with Okami from this account” switch below it, on by itself, as the studio's has in Studio channels.
- Not connected, the way back sits under the hint: Instagram's sign-in can leave someone on their feed, never sending them back.
- Once Meta stops letting Okami in (the token lapsed, or a refresh was refused with under three days left), the row says so in place of what Okami does there, and offers Connect again in Disconnect's place.
- How connecting went sits in the description line, a span under the hint: never a paragraph inside the row's paragraph.
- Without a calendar person the row isn't there: there's no one to book with.
A wide control, under its name
Details
A few lines on your booking page. Okami answers clients from it.
<SettingRow label="About the studio" stacked control={<Textarea rows={3} />} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| SettingsGroup title | string | — | The group's name, over a hairline. |
| SettingsGroup description | ReactNode | — | What the group is for, one quiet line under its name, when the rows don't say it. |
| SettingsGroup action | ReactNode | — | A small secondary button at the head's right, level with the title and its line: where the group's things are edited (My services › Edit services). |
| SettingRow label | string | — | The setting's name. |
| description | ReactNode | — | What it does, one quiet line. |
| htmlFor | string | — | The id of the field the name labels. Without it the name is plain text: a row of several controls, or none. |
| control | ReactNode | — | The control, on the right; give it its width. |
| stacked | boolean | false | Puts a wide control under the name. |
| inline | boolean | false | Keeps a compact control (a Switch, a Badge) beside the name at every width; the name wraps instead. |
Guidelines
- Name a setting by what the person decides (“Book ahead by”), and say in the description what changes.
- Give short controls a fixed width so a group's controls line up; text boxes and links go under their name.