A pill segment control switches between two to four related views or filters in the same surface. A pill slides to the active segment.
How to add a pill segment control to a page. The files are components/css/pill-segment-control.css and components/js/pill-segment-control.js.
Link the shared files once per page. Never copy the rules into a page, and never position the pill yourself.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/pill-segment-control.css"> and <script src="/components/js/pill-segment-control.js"></script>. Both templates already have them. |
| 2. Markup | A div.pill-segment-control[role="group"] with an aria-label, a span.pill-segment-control__thumb and two to four button.pill-segment-control__btn. |
| 3. Active segment | pill-segment-control__btn--active and aria-pressed="true" on one button. |
| 4. React | Listen for the segment-change event and swap the content. |
| 5. Size | Large is the default. Add pill-segment-control--md, --sm or --xs. |
The markup has no motion. The pill’s slide is set in Motion on Examples & Guidelines.
| Class | Use |
|---|---|
pill-segment-control | The track. Large. |
pill-segment-control--md, --sm, --xs | Medium, Small, XSmall. |
pill-segment-control__thumb, --light | The pill. --light is the white pill. |
pill-segment-control__btn, --active | A segment. |
| Name | Use |
|---|---|
segment-change | Bubbling event on the button’s ancestors. e.detail.button is the segment that was clicked. |
--sg-duration, --sg-ease | Duration and easing of the pill. Defaults: duration-medium-2 and ease-standard. |
ECO_SEGMENT.init(root) | Wires controls added later. |
align-items: stretch, align-self: flex-start is needed (it is in the CSS).data-state="hover"; it does nothing elsewhere.The component is one CSS file and one script, shared by every page. Link them, never copy them.