SettingsSection
A titled block of a settings screen. The rows inside get a line between each; turn framed off to place cards of your own under the heading.
- SettingsSection
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, SettingsSection
Git accounts
Hosts the agents push to and read activity from.
Default branch
Used when a project has none.
Remove all accounts
Tokens are deleted from this device.
Dark theme, SettingsSection
Git accounts
Hosts the agents push to and read activity from.
Default branch
Used when a project has none.
Remove all accounts
Tokens are deleted from this device.
High contrast theme, SettingsSection
Git accounts
Hosts the agents push to and read activity from.
Default branch
Used when a project has none.
Remove all accounts
Tokens are deleted from this device.
UsageLink to the section Usage
import { SettingsSection } from '@skribly/ui/surfaces'<SettingsSection
title="Git accounts"
description="Hosts the agents push to."
actions={<Button size="sm">Connect</Button>}
>
<SettingRow … />
</SettingsSection>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A region named by its heading and described by its description.
- Pick the heading level with level.
- Rows keep their own labels: the section never takes the name of a control.
This demo runs through axe in all three themes on every test run. See what the tests check.