Waffles - Button

Usage guidance

The Button comes in four different variants: primary, secondary, plain, destructive, and upgrade. The provided text content is automatically Title Cased using our setTitleCase helper, but can be disabled in rare cases with disableTitleCase.

When using multiple Buttons, they should be horizontally separated with tokens.spacing.small from Design Tokens and stacked vertically (with the same spacing) where this is not possible.

Additionally, Buttons also have an isLoading state which disables it and features the Loader component. It can be used to show that an action is in process, e.g. submitting a form.

Button is available in three different sizes: small, medium and large. In most cases, the default value should be used.

Variants

Primary

Ideally used only once on a page to display the most important action we want the user to take.
Usually, the default size is sufficient, but to draw more attention large size can be used
Use small size sparingly—in tight spaces or more complex user interfaces
Primary Buttons should be positioned on top or to the right of other Buttons in a group

Secondary

Can be used multiple times on a page, in a combination with a primary or plain Button to create an action hierarchy
Usually associated with an alternative action to a primary variant

Plain

Should be used for supportive, less important actions within a hierarchy

Destructive

Expresses an action a user can't take back

Upgrade

Should be used only in context of upgrading to different DataCamp's pricing plan

Button vs Link

For navigational actions that appear within or directly following a sentence, use the Link component.

For standalone navigational actions, it is fine to use Button—just set the as prop to to a. Custom components, such as react router Link can be passed that way as well.

Best practices

General

Label

A label should be short, clear, and actionable, such as Get Certified Now.

Button with an Icon

Icons add additional visual context and make buttons easier to scan. A button with an icon also draws more attention.

Examples

Basic usage

Variants

Sizes

States

With icons

Full width

As a Link

As Link

Playground

import { Button } from '@datacamp/waffles/button';
import { AddCircle, ChevronRight } from '@datacamp/waffles/icon';

function Playground() {
  return (
    <Button variant="secondary" size="medium">Hello</Button>
  );
}

import { Button } from '@datacamp/waffles/button';
import { AddCircle, ChevronRight } from '@datacamp/waffles/icon';

function Playground() {
  return (
    <Button variant="secondary" size="medium">Hello</Button>
  );
}

Live

Props

Button

In addition to the props listed below, Button accepts all props from React.HTMLAttributes<HTMLButtonElement>, such as: onClick, disabled, type and data- attributes.

Name	Type	Description
`as`	`React.ElementType`	The element used to render this component, e.g. `a` or react router `Link`.
`aria-label`	`string \| (isLoading: boolean) => string`	Accessible label for the Button. For better accessibility and configuration when `isLoading`, provide the prop as a function.
`children`	`React.ReactNode`	The content inside the Button. Most of the time should be a plain text. Should never be an empty string.
`disableTitleCase`	`boolean`	Disables the default Title Casing when text content is provided. Use only in rare situations. Default: `false`
`fullWidth`	`boolean`	Allows the Button to grow to the width of its container. Default: `false`
`icon`	`JSX.Element`	An icon displayed as the only content of the Button. Because of that `aria-label` attribute must be specified. Could be any Icon from Waffles (use default size) or a custom component.
`iconLeft`	`JSX.Element`	An icon displayed to the left. Could be any Icon from Waffles (use default size) or a custom component.
`iconRight`	`JSX.Element`	An icon displayed to the right. Could be any Icon from Waffles (use default size) or a custom component.
`inverted`	`boolean`	Sets the style of the Button suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`isLoading`	`boolean`	Whether the Button is in it's loading state. The Button will maintain the minimum width of it's child content. Default: `false`
`size`	`largemediumsmall`	Defines the size of the Button. In most cases, the default size should be used. Default: `medium`
`variant`	`destructiveplainprimarysecondaryupgrade`	Defines the variant of the Button. Default: `secondary`

Imports

You can import the following components, utilities or types from this module:

import { Button } from '@datacamp/waffles/button';
import type { ButtonProps } from '@datacamp/waffles/button';