Button

Best Practices

Buttons should:

• Be clearly labeled and explicitly state what they do.
• Be labeled with actionable verbs, following the Verb + Noun format except in the case of common actions like Save, Edit, Close, or Cancel.
• Be positioned in consistent locations and in a sensible order.
• Use spacing to separate them from other interactive content.
• Not wrap text. For maximum legibility, a label should remain on a single line.

Buttons should not:

• Be used in place of a more semantic element.

  • For navigation or actions that do not affect the state of the app, use EzLink. A button does something. A link goes somewhere. Ex. breadcrumbs, redirects, "forgot password", and "learn more" all go somewhere rather than do something, so should be links.
  • For status chips, use EzChip. Chips are reactive and contextual, whereas buttons are static and predetermined. Ex. a delivery status of "confirmed" is contextual and not a static action, so should be a status chip.
• Provide too many options at once with too many buttons.

Examples

Basic Buttons

EzButton supports filled (default), outlined, text, and inline variants.

filled buttons are high-emphasis and contain actions that are primary. There should not be more than one primary button in a section of a page.

outlined buttons are medium-emphasis and contain actions that are secondary, which are important but aren't the primary action. A page or section should not have more than two secondary buttons.

text buttons are typically used for less-pronounced actions than primary or secondary actions. They may also be used when space is a constraint or when content is repeated many times on a page.

inline buttons are text buttons that align with surrounding text.

Button Actions

Buttons accept an onClick prop for performing actions on click and onKeyDown for performing actions on a key down.

For destructive actions, set the button's color to destructive.

Button Colors

EzButton supports theme palette properties (primary, secondary, error, warning, info, and success) as well as all supported theme colors (ex. common.neutral160). Text and background colors should have high enough contrast for accessibility.

Button and Font Sizes

If you want to specify a button size, use the size property. We currently support small, medium (default), and large.

If you want to specify a font size, use the fontSize property, which uses theme supported font sizes. We currently support small, medium (default), large, and inherit.

Button Icons

You can add an icon to the beginning or the end of a button by passing an EzIcon to the optional startIcon or endIcon property.

Icon sizes will default to the font size of the text. If you need a different icon size, use size="inherit" on the EzIcon and wrap it in an element with the desired size.

Disabled and Loading Buttons

Disabled buttons can be used to prevent users from doing an invalid or unavailable action.

In general, you should consider removing options that are not available or not applicable, but in some cases showing a disabled button may be necessary. In these cases, be sure to provide context for why the action is unavailable either with a message, or tooltip.

A button can be made disabled by adding the optional disabled prop. Disabled buttons do not respond to user input and therefore will not trigger onClick behavior.

A button can also display a loading spinner by adding the optional loading prop. A loading button will always be disabled.

Complex Buttons

EzButton can be used with other Recipe components to create more complex buttons.

Legacy Buttons (Deprecated)

To aid users in migrating to Recipe's current version, a temporarily supported legacy implementation for EzButton is available. To use Recipe's deprecated button style, add the legacy prop.

Custom Styles

Supported styles should be used, but if you need to overwrite styles for the background, text, icon, or border, you can do so using provided class names (EzButton, EzButton-[variant], EzButton-startIcon, EzButton-endIcon, and EzButton-disabled).

Accessibility

See WAI-ARIA accessibility guidelines for buttons.

All buttons have an accessible label. By default, the accessible name is computed from any text content inside the button element. However, it can also be provided with ariaLabel.

If you need to hide a button from all accessibility APIs, for example to avoid confusion when using a call-to-action button inside an interactive card, add the ariaHidden prop to the button.

Data Attributes

EzButton is very explicit about the properties it accepts, which makes providing arbitrary data attributes not possible. Instead, EzButton accept a data prop, allowing a single collection of data attributes to be provided.

Props

Related components

• EzChip
• EzIcon
• EzLink