SettingsIndex
A settings home page: titled sections of links, each with an icon, a title and a line on what's inside, in up to three columns.
import { SettingsIndex } from "@butteryui/react";Demo
When to use it
Use it for
- The page behind a Settings link, leading to each settings page
- Any index of a dozen or more pages grouped by topic
Not for
- Moving between pages from anywhere: use Sidebar
- A few choices to start something: use ChoiceDialog
Examples
Roastery settings
A small settings page with two groups, the last ending with a dashed link to more, its links handed to the app.
Routed settings
Links handed to a router: a setting opens in place, and its trail leads back to the index.
Variants and states
Three groups of settings
Three columns from 1024px of room, two from 640, one under that; a long line wraps.
You
Your shop
Money
Props
SettingsIndex
It also takes ComponentPropsWithRef<"div">.
SettingsIndex.Link
| Prop | Type | Default | Description |
|---|---|---|---|
iconrequired | ComponentType<IconComponentProps> | A 16px icon in its tile. | |
titlerequired | string | The settings page's name, such as "Shipping". | |
description | string | What's on that page, in a line that wraps. | |
hrefrequired | string | The settings page. | |
onNavigate | ((href: string, event: MouseEvent<HTMLAnchorElement>) => void) | Runs as the link is followed, where a router can take over. A click that opens the page elsewhere, in a new tab or window, is left to the browser. |
It also takes Omit<ComponentPropsWithRef<"a">, "title" | "children" | "href">.
SettingsIndex.More
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The settings page's name, such as "Shipping". | |
description | string | What's on that page, in a line that wraps. | |
hrefrequired | string | The settings page. | |
onNavigate | ((href: string, event: MouseEvent<HTMLAnchorElement>) => void) | Runs as the link is followed, where a router can take over. A click that opens the page elsewhere, in a new tab or window, is left to the browser. |
It also takes Omit<ComponentPropsWithRef<"a">, "title" | "children" | "href">.
SettingsIndex.Section
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The section's heading in title-md, which names it. | |
titleAs | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "h2" | The heading's element. Defaults to "h2", under the page's h1. |
It also takes Omit<ComponentPropsWithRef<"section">, "title">.
Accessibility
Each section is a region named by its heading, an h2 by default, holding a list of links. Each link is named by the page's title and its line.
| Keys | What they do |
|---|---|
| Enter | Follows the focused link, through onNavigate when it's given |
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It fills its parent's width, sections 32px apart, each a title-md heading over a grid of links: three columns from 1024px of its own width, two from 640, one under that. Each link is a block, r12 and padded 12, with a 32px icon tile beside its title and a line that wraps, and the whole block is the hit area.
Related
See it in the roastery demo's settings.