This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Button

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.

Table of contents

How to use Buttons

  • 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

Component variations

Types

  • 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 a 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.

Buttons can be used in couple of different variations, like active, disabled or loading.

Sizes

Contentful buttons are available in 3 different sizes:

Rendered as different Elements

Contentful buttons can be rendered as a-tag which allows also use them with a href.

Code examples

Usage of the button with dropdown indication

Icon Button

Content recommendations:

  • UI usage - Button labels should be no longer than 3 words
  • Webpage usage - Button labels should be no longer than 5 words
  • Start labels with action verbs. If the button is part of an action dialog, make sure it matches the dialog header.
  • Use specific words, ideally ones that align with preceding content.
  • 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.

Accessibility

Button component is used to trigger an action or event. By default button is implemented using the native <button> element with the proper type="button" provided. If the href element is provided, then the element would be rendered as <a> element in the document. When a button has focus, both the Space and Enter keys will activate the button. If the button is disabled, then the disabled attribute is provided. Contentful buttons are checked in terms of color contrast and pass all the requirements. Buttons have a focus state when using keyboard navigation.

Icon buttons must always have aria-label that describes it's purpose when no text is provided

Props

NameRequiredDefaultTypeDescription
endIconReactElement<any, string | JSXElementConstructor<any>>Expects any of the icon components. Renders the icon aligned to the end
isActivefalse
false
true
Applies active styles
isDisabledfalse
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
sizemedium
"small"
"medium"
"large"
Determines size variation of Button component
startIconReactElement<any, string | JSXElementConstructor<any>>Expects any of the icon components. Renders the icon aligned to the start
variantsecondaryButtonVariantDetermines style variation of Button component
asbuttonHTML Tag or React Component, e.g. div, span, etc.The element used for the root node.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes