Button

Example

Buttons invite interaction by having rounded corners and rising up on hover. They are used to trigger an action, such as submitting a form.

A button is different to a link, which is used for any interaction that navigates to another ‘page’.

<button
    tgButton2>
    Button
</button>

Behaviour

At the sm breakpoint, buttons become 100% of the width of their parent container.

Accessibility

• When using an icon on its own as link or button, make sure that a description is available for customers using screen readers. Use the alt text on the icon to provide this description.
• Icons shown alongside text in a button should be hidden from assistive technology to avoid a double up of content. Add aria-hidden="true" to hide the icon from the screen reader.

Button design pattern

Watchlist design pattern