Button

import { ... } from '@ag.ds-next/react/button';

For general guidance on content, go to the content patterns.

Length

Label

Up to 30 characters.

Structure

Label

Start with a verb and end with a noun where there is space. Don’t use conjunctions, prepositions and pronouns in between. Don’t wrap labels with quotation marks.

For example, ‘Edit Establishment’, not ‘Edit my Establishment’ or ‘View corrective action’, not ‘View’. However, if space is limited, use a verb only.

Language

Label

Use a concise, unique and meaningful text label. The label text should describe the specific action that happens next if the user selects it.

Try to avoid using general labels that don’t provide the full context. For example, ‘Read more’.

Refer to the glossary for consistent button labels we use and more guidance.

Voice and tone

Go to the TFTM Voice and tone guide for guidance.