Response button
Response buttons let users quickly select from predefined options.
Published: Last updated:
Overview
Response buttons allow users to select one or more options using button-style inputs. Paired with a label or question, these buttons can be configured for either single or multiple selection. They provide a more visual and engaging alternative to traditional radio buttons or checkboxes.
When to use
- Use when a more visual, engaging alternative to checkboxes or radio buttons is needed
- Use when the number of options is small (typically 2–5)
- The choices need to be clearly highlighted in the UI
- Quick, at-a-glance decisions are required (e.g. Yes / No, emoji reactions, short lists)
When not to use
- There are too many options, which may overwhelm or clutter the interface.
- The selection requires long descriptions or complex inputs
- Users need to input custom values or write their own response
- Label text: Text that guides users on the required response. It is mandatory unless an approved accessibility exemption applies.
- Response buttons: Available responses for the user to choose from.
- Assistive text (optional): Additional text that offers support or context to the input label.
- Helper text (optional): Text that offers additional guidance or context for the response buttons.
Size
Response buttons are available in two sizes: medium and large. This allows flexibility in layout, with the large size offering greater visibility and emphasis when needed. Large response buttons are typically paired with icons.
|
Size
|
Height (px/rem)
|
Use case
|
|---|---|---|
| Medium | 44 / 2.75 | This is the standard size and the most frequently used. If unsure, opt for the medium size |
| Large | 80 / 5 | Use when greater emphasis or focus is needed on the responses |
Labels
Clear labelling helps users understand what response(s) to select from the button options. Response buttons should always have a label.
- Use sentence-style capitalisation for all labels, except for product names and proper nouns.
- Keep labels short and concise.
- Do not use colons after label names.
Button labels
A response button’s label is its key element, clearly communicating the option a user is selecting. Labels should be concise and predictable to support a smooth user experience.
Aim for single words where possible, with a recommended maximum of three words to maintain clarity. Exceptions can be made in compact UIs where long button labels could cause layout issues
All response button labels use sentence case.
Assistive / helper text
Optional assistive and helper text provides relevant information to assist users in accurately completing a task and is often used to clarify the response.
Assistive text sits directly below the label text and offers support or context to the label, whereas the helper text offers additional guidance or context for the response buttons.
- Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.
- When used, helper text appears persistently beneath the response buttons, except when replaced by an error message.
Overflow content
If a response button label is too long to fit within the available space, consider using an alternative component like a select input.
Ideally, labels should stay on a single line to keep things clear and visually balanced. However, it’s acceptable for response buttons themselves to wrap to a new line if needed to accommodate longer labels.
States
Response buttons have multiple interactive states: resting, hover, focus, active, error, disabled, and read-only. For more details on these interactive states, refer to the style tab.
|
State
|
When to use
|
|---|---|
| Resting | The resting state refers to when a response button is live, but the user is not directly interacting with it. This is commonly known as the default or normal state of the component. |
| Hover | When a user places the cursor over the response button. |
| Focus | When a user tabs to a response button, it enters the focused state, signalling that the user has successfully navigated to the component. |
| Active | When a user has clicked a response button. |
| Error | When the user input is invalid or a required task has not been performed, or due to a system error. This state requires user intervention before data can be submitted or saved. |
| Disabled | When the user cannot interact with a component and all interactive functions have been disabled. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to meet visual contrast requirements, making them inaccessible if interpretation is necessary. |
| Read-only | When the user can review but not modify the component. This state disables all interactive functions, similar to the disabled state, but it remains focusable, accessible by screen readers, and meets visual contrast requirements for readability. |
Assistive / helper text in disabled and read-only states
Response buttons in disabled and read-only states do not require assistive / helper text because users cannot modify their content, eliminating the need for guidance. In these states, any necessary context should be provided through labels or surrounding content rather than additional helper text that might imply interactivity.
Validation
Response buttons should be validated upon form submission. For comprehensive guidance on errors and validation, refer to the form pattern.
Validation messages take precedence over helper text and will replace it when triggered. If an input displays helper text, it will be hidden in favour of the validation message when an error state occurs.
Error
An error state is triggered when an invalid response is selected or when a required response is left unselected. It is visually indicated by a red border, an error icon, and an error message to help users identify and correct the issue.
Icons
Icons can be used above labels to clarify a response option and draw attention to a button. However, they should be used sparingly to avoid visual clutter and maintain usability. Not all buttons in a UI need icons, but within a group of response buttons, icons should be used consistently if appropriate.
- Icons should match the font size of the label
- Icons should always appear above the label
- Icons used in buttons should be directly related to the response the user is selecting
- Icons must match the colour of the label within the button
Equal width buttons
Large response buttons can be optionally set to equal widths within a group to create a more uniform and balanced layout. This can be useful when labels vary in length, helping with visual consistency and easier comparison. Equal widths can be toggled on or off depending on the design needs.