Button group
Internal
A component for grouping buttons and links on a single line.
<div class="govuk-button-group">
<a class="govuk-link govuk-link--active" href="#">
One
</a>
<a class="govuk-link govuk-link--active" href="#">
Two
</a>
<a class="govuk-link govuk-link--active" href="#">
Three
</a>
</div>
<ButtonGroup>
<Link href="#">One</Link>
<Link href="#">Two</Link>
<Link href="#">Three</Link>
</ButtonGroup>
Props
|
| string | - | 'id' attribute to place on the base HTML element |
| string | - | Block name override in BEM style classes applied to all elements |
| Modifiers | - | BEM style modifiers to apply to the base HTML element |
| string | - | Extra classes to apply to the base HTML element |
Stories
Standard
A standard Button group.
<div class="govuk-button-group">
<a class="govuk-link govuk-link--active" href="#">
One
</a>
<a class="govuk-link govuk-link--active" href="#">
Two
</a>
<a class="govuk-link govuk-link--active" href="#">
Three
</a>
</div>
<ButtonGroup>
<Link href="#">One</Link>
<Link href="#">Two</Link>
<Link href="#">Three</Link>
</ButtonGroup>