Chip

One of a row of options where one is on, like filters or a picker. Type comes from wherever it sits.

Markup

<button class="ob-chip" type="button" aria-pressed="true">Work</button>
<button class="ob-chip" type="button" aria-pressed="false">About</button>

<button class="ob-chip ob-chip--outline" type="button" aria-pressed="false">UK</button>

Notes

aria-pressed marks the one that's on, so screen readers hear it too. .is-selected works where that doesn't fit, like a link. --ob-chip-radius and --ob-chip-pad change the shape.

CSS

@import "obvious/css/components/chip.css";

Knobs

Set any of these on the component, or an ancestor, to change it.

Property	Default
`--ob-chip-radius`	var(--ds-radius-full)
`--ob-chip-pad`	var(--ds-space-xs) var(--ds-space-sm)