Using standard buttons in the interface
Use consistent buttons across the application to trigger actions, links, and key workflows.
This guide is designed for project manager.
Steps
Step 1: Identify primary call-to-action buttons
Locate the main "default" buttons in your interface, which are styled as filled terracotta call-to-action controls for key actions such as saving or submitting.
Step 2: Recognise warning or destructive actions
Look for "destructive" buttons styled in red, which indicate actions such as deleting, cancelling permanently, or removing records, and confirm before using them.
Step 3: Use outline buttons for secondary choices
Use the outlined buttons for secondary actions such as "Cancel", "Back", or "Learn more" that should be visible but less prominent than the primary call-to-action.
Step 4: Distinguish ghost and secondary buttons
Identify ghost and secondary buttons, which sit on the page background with subtle hover states, and reserve them for low-priority or optional actions.
Step 5: Identify link-style buttons for navigation
Recognise "link" variant buttons which appear as text links with an underline on hover, and use them to navigate to supporting pages or documentation.
Step 6: Check button sizes for different contexts
Observe how default, small, large, and icon button sizes are used to match different contexts, such as compact toolbars, primary actions, or icon-only controls.
Step 7: Confirm accessibility and focus states
Tab through the page to ensure buttons show a clear focus ring and meet accessibility expectations for keyboard navigation and touch targets.
Related Tasks
Last updated: 2026-06-15