Buttons communicate the action that will occur when the user clicks them. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. They contain a text label to describe the action, and an icon if appropriate.

Import

import { Button } from '@contentful/f36-components';
// or
import { Button } from '@contentful/f36-button';

Examples

Variants

Button has 5 different variants:

  • Primary - Used for the most important actions in any scenario. Don’t use more than one primary button in a section or screen to avoid overwhelming users.
  • Secondary - Used for secondary actions, the most commonly used button type.
  • Positive - For use when the action has a positive connotation such as creating or publishing a new entity.
  • Negative - For destructive actions - when something can't be undone. For example, deleting entities.
  • Transparent - For having an unstylized button.

Sizes

Button has 3 different sizes:

States

Full width

Rendered as a tag

By default, button is rendered as a button tag. But you can change it to a tag, by providing as prop. Don't forget to pass href prop as well.

With icons

You can add an icon by providing the following props:

  • startIcon - adds icon to the left side of the button
  • endIcon - adds icon to the right side of the button

Props (API reference)

Open in Storybook

Name

Type

Default

as
HTML Tag or React Component (e.g. div, span, etc)

The element used for the root node.

children
ReactNode

className
string

CSS class to be appended to the root element

endIcon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components. Renders the icon aligned to the end

isActive
false
true

Applies active styles

isDisabled
false
true

Disabled interaction and applies disabled styles

isFullWidth
false
true

Forces button to take 100% of the container

isLoading
false
true

Adds loading indicator icon and disables interactions

size
"small"
"medium"
"large"

Determines size variation of Button component

startIcon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components. Renders the icon aligned to the start

testId
string

A [data-test-id] attribute used for testing purposes

variant
"negative"
"positive"
"primary"
"secondary"
"transparent"

Determines style variation of Button component

Content guidelines

  • Don't use more than one primary button in a section or screen to avoid overwhelming users.
  • Start labels with action verbs. If the button is part of an action dialog, make sure it matches the dialog header.
  • Position buttons in consistent places in the interface
  • Use the right button for the primary action, if the button group is right-aligned
  • Use the left button for the primary action, if the button group is left- or center-aligned
  • Reduce complexity by using a small number of actions. Too many actions can create confusion when having to decide
  • For buttons that are used to cancel destructive actions: label them "Never mind" or similar, instead of cancel. It makes things much easier for users to understand.
  • UI usage - Button labels should be no longer than 3 words
  • Webpage usage - Button labels should be no longer than 5 words

Accessibility

  • When Button is focused, both the Space and Enter keys will activate the button.
  • All Button variants are checked in terms of color contrast and passed all the requirements.
  • Buttons have a focus state when using keyboard navigation.