Button

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

Here are the reasons why our buttons appear or work the way they do.

Align buttons to the left

It’s predictable for the user if you align buttons consistently to the left as English is read from left to right.

A user can miss buttons that align to the right, especially on large screens or if they use a screen magnifier.

Meaningful text labels

It may be clear to some users what a button action is due to what’s around it. For example, an “edit” button in a row of a table would allow a user to edit that row. But it may not be to others.

A meaningful button label with a noun and verb makes the action that happens next obvious to all users and easy to scan.

Don’t use disabled buttons

A disabled button can confuse users as:

• it doesn’t give a reason why it’s unavailable causing some users to get stuck,
• it can be hard for a user with a visual impairment to see,
• it is not keyboard accessible.

Button label and icon

Always use a visible label with an icon in a button unless there’s insufficient space.

Buttons with icons and no visible label can confuse users who may mistake the icon for an incorrect action. For example, an ‘x’ can close a page but also indicate an error to the user.