<div class="pills pills--secondary" role="menu">
<div class="pills__item">
<a class="pills__link" href="#" role="menuitem">Link 1</a>
</div>
<div class="pills__item">
<a class="pills__link" href="#" role="menuitem" aria-current="true">Link 2</a>
</div>
<div class="pills__item">
<button class="pills__button" role="menuitem">Button 2</button>
</div>
<div class="pills__item">
<button class="pills__button" role="menuitem">Button 1</button>
</div>
</div>
This component is for showing a set of buttons in a row. It can be used as menu or tabs for a tabbed page.
Make sure you use the right role attribute based on the usecase.
In this example we defined it as a menu, see the tabs component for an example where it is used as a tab.
You can mark the active element by adding the attribute aria-current="true". If you have a specific use for the buttons (like page, location, date) you can use different values for aria-current. See this page for more examples.
When you are using the pills as tabs you can use aria-selected="true" to mark the currently selected tab.
This component is rendered here with a example script so that you can select an item and see how it looks.