Settings cell

The settings cell is a navigation row used in the settings screen to let users navigate into a sub menu. Each cell displays an icon, a label, and a trailing chevron. Cells are always stacked inside a container card and always carry an icon.

When to use

Use the settings cell inside a settings card to provide navigation to a sub menu or nested settings screen.

Don't use the settings cell for actions that do not navigate anywhere, such as toggles, destructive actions, or confirmations. Use a dedicated action row or button instead.

States

Default

The resting state. White background (broz-bg/neutral/light/default).

Pressed

The active/pressed state shown on tap. Background shifts to broz-bg/interactive/light/hover to give tactile feedback. Used transiently during navigation.

Structure

Each cell is a full width horizontal row containing:

• Icon — a 20×20px icon on the left, always present, coloured broz-icons/neutral/primary.

• Label — the name of the destination screen (e.g. "Account"), in text/content/body/emphasis, coloured broz-content/neutral/primary.

• Trailing chevron — a 20×20px right arrow icon indicating navigation, always present, coloured broz-icons/neutral/primary.

The icon and label are grouped together with a gap of responsive/layout/padding/md. The cell has horizontal padding of responsive/layout/padding/lg, top padding of responsive/layout/padding/lg, and bottom padding of responsive/layout/padding/xl. A bottom border (broz-borders/subtler, responsive/layout/border/lg) separates each cell from the one below it. The last cell in a card should have its bottom border removed.

Interaction

Tapping a settings cell navigates the user to the corresponding sub menu screen. The cell transitions to the pressed state on tap and returns to default after navigation.

Placement

Settings cells are always placed inside a container card on the settings screen. They stack vertically, one per navigation destination. The last cell in a group has no bottom border.

Accessibility

• Each cell must be announced as a navigation element with its label, for example: "Account, go to sub menu."

• The trailing chevron is decorative and must be hidden from the accessibility tree (aria-hidden).

• The icon is decorative and must also be hidden from the accessibility tree (aria-hidden). The label alone provides the accessible name.

• Cells must be keyboard focusable and activatable with Enter or Space.

Tokens