Button group
A compact attached or segmented set of related buttons.
Try it
Segmented view switch
A named exclusive display choice.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_button_group.html" with items=view_items variant=variant aria_label=aria_label %}context = {'view_items': [{'label': 'List', 'selected': True}, {'label': 'Grid'}], 'variant': 'segmented', 'aria_label': 'View mode'}Guide
Add it to your project
- Prepare item dictionaries.
- Include the partial and supply `aria_label` when surrounding text does not name it.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| items | list[dict] | Not set | Yes | Items with `label`, and optional `href`, `selected`, `type`, `name`, `value`, `disabled`. Constraint: Each item must follow the component's documented item-record shape; keep labels and destinations paired. |
| size | str | md | No | Child button size. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
| variant | str | attached | No | Group geometry and semantics. Allowed: attached, segmented. Constraint: Use one of the documented variants; use `danger`, not an invented `error` severity. |
| aria_label | str | Not set | No | Accessible group name. Constraint: Use a concise non-empty accessible name whenever the visible label does not name the control. |
| button_variant | str | secondary | No | Treatment forwarded to each item. Allowed: secondary, primary, ghost, danger. Constraint: Allowed values: `secondary`, `primary`, `ghost`, `danger`. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Attached groups are groups; segmented groups use radiogroup and radio semantics.
- Responsive
- No breakpoint switch; host layout determines wrapping.
- Without JavaScript
- Static controls work without JavaScript.
Need help?
Troubleshooting
Contract check: Accessibility: attached uses role="group"; segmented uses role="radiogroup"
Use the segmented form only for one selectable choice and supply the item selection state expected by that radio-group contract.