Button

Design
Recipe
React

Button

Description

Buttons allow a user to take an action. With a button, a user can submit or request information, make decisions, and navigate.

When choosing the right button for an action, consider the level of emphasis each button type provides

Primary buttons have the most visual emphasis. Secondary buttons have less visual emphasis. Text buttons have the least visual emphasis.

Coming Soon: Button Example

Sizes

Button sizes are large, medium (default), small, and auxiliary (or extra small).

Button width is determined by a button’s content (icon and/or text) and minimum left/right padding. Designers may adjust buttons to exceed the minimum padding and content width.

Full-width buttons should be reserved for narrow layouts such as for mobile screens or narrow slideouts.

Coming Soon: Button Size Examples

Usage

Icons

Buttons with text labels may have an optional left or right icon, but not both. Buttons may also have an icon without text.

Coming Soon: Button with Icon Examples

Hierarchy

Hierarchy gives subtle clues to users about which is the most desirable action. When creating a button system, make sure to match the styles with each button type's importance.

A primary action is an action that allows the user to accomplish their most common or most important goal. As such, primary buttons should only be used for the most important action.

Only one primary button may be used in a containing element. For example, a page without sections may have only one primary button, whereas a page of vehicle listings may have a primary button on each listing.

Not all buttons correspond to a desirable action. While the primary button is used for the action you want a user to take, secondary buttons are for alternatives (such as "Cancel" buttons).

Secondary buttons should still look and feel like buttons but have a more toned-down style.

You can also use secondary buttons or text buttons when two or more actions are needed on a page.

Coming Soon: Button hierarchy with do/do not

When pairing two buttons for submit/cancel, use a primary button for submit and a text button for cancel. When only one button is needed (such as, “Okay”) use a primary button.

Coming Soon: Button hierarchy cancel example

Scale Alignment

Always match button size with input size: i.e., medium inputs with medium buttons; small inputs with small buttons.

Coming Soon: Button scale alignment with do/do not

Use Medium (default) buttons in most cases. In dense layouts where vertical space is at a premium, small buttons may be used on large screens.

Small buttons are never used on mobile screens. Large buttons may be an appropriate option for certain applications intended for tablet use in the field.

Disabling Buttons

In most cases, buttons should not be disabled. Potential exceptions to this may be:

When a user does not have role permissions to perform an action.
When a button has been submitted and the request is in progress.
When it is the most efficient approach to helping the user complete work accurately.

Layout

Button placement matters when it comes to helping users intuitively know where and how to take an action, especially considering users are experienced in multiple web applications.

In general, but especially in small windows, the primary action button is placed at the bottom right. Our brains naturally scan the content on the screen, making it a common best practice to have the most important actions placed in the bottom right.

Additionally, when it comes to mobile use, the majority of mobile interactions are completed with the thumb and designed for the right-handed majority of the population.

Buttons are normally aligned to the right with the primary action on the far right.

In a multi-step process, a “Back” button may be aligned to the left.

Coming Soon: Button Layout example

When stacked on a narrow screen, the primary action is placed above the other action.

Coming Soon: Button Layout example when stacked

When content is expected to push buttons below the viewport, they should normally be locked to the bottom of the viewport in a horizontal or stacked configuration. Locked buttons are placed on background with opacity so user has visual understanding of content below.

Coming Soon: Locked button example

Variations

Auxiliary Buttons

Auxiliary buttons are very small text buttons with short labels which are useful for infrequent actions (e.g.,“Refresh”), or to provide multiple actions in a tight layout (e.g.,“Details”, “Copy VIN”). They can be used with a left or right icon.

Floating Action Buttons

Floating Action Buttons are fixed in a specific location and are only displayed when relevant to the displayed content. These buttons overlay content on the screen when they display.

Common examples allow a user to create something new, scroll to the top of a page, or scroll horizontally in a carousel or media viewer.

Floating Action Buttons may be icon only, or text with a left or right icon.

Coming Soon: floating action button example

Best Practices

Content and Labels

Button labels should always inspire your users to act. That’s why the best buttons use action verbs. When users read action verbs like Save, Download or Edit, they know exactly what the button will do when pressed.

Use simple and concise language in your button labels to clearly describe what action the user takes when they click it.

When they’re moving to the next step: “Continue”

When they’re completing payment: “Complete payment”

When they’re signing up: “Sign Up”

Avoid using terms that are generic and non-specific such as “ok”. Instead use words that relate to the action. One way to do this is to repeat the action verb that is used in the headline of the page or window.

Coming Soon: content scenarios and do/do not examples

Accessibility

Users should be able to navigate to and activate a button with assistive tech.

Styles

Styles for buttons are coming soon

Code

In regular markup, using the .btn class without a modifier will create a contained button. The .btn class can be used on <button>, <a>, or <input> elements. Links should be assigned a role="button" attribute.

With React, the Button component can apply branded styles by padding properties. Theming is available with color (string), size (string), variant(string), icononly(bool), and disabled (bool).

Contained Buttons

Icons can be added before or after text.

<Container>
  <Row>
    <Col>
      <Row className='row align-items-center'>
        <Button color='primary' className='m-2'>
          CONTAINED BUTTON
        </Button>
        <Button color='primary' className='m-2'>
          <i className='icon btn-icon__left interstate-icon-search' />
          ICON BUTTON
        </Button>
        <Button disabled color='primary' className='m-2'>
          DISABLED BUTTON
        </Button>
        <Button color='primary' className='m-2'>
          ICON BUTTON
          <i className='btn-icon__right icon interstate-icon-chevron-right' />
        </Button>
        <Button color='primary' size='sm' className='m-2'>
          CONTAINED SMALL BUTTON
        </Button>
        <Button color='primary' size='sm' className='btn-icon-only m-2'>
          <i className='icon interstate-icon-envelope' />
        </Button>
        <Button
          className='btn-icon-only m-2'
          disabled
          color='primary'
          size='sm'
        >
          <i className='icon interstate-icon-envelope' />
        </Button>
        <Button color='simulcast' className='m-2'>
          SIMULCAST BID BUTTON
        </Button>
      </Row>
    </Col>
  </Row>
</Container>

Outlined Buttons

For outlined buttons, add a .btn-outline-*** modifier followed by color.

With React, pass the outline value for variant prop to the Button component. This will apply required styles, so it is not necessary to pass a color prop.

<Container>
  <Row>
    <Col>
      <Button variant='outline' className='m-2'>
        OUTLINE BUTTON
      </Button>
      <Button variant='outline' className='m-2'>
        <i className='icon btn-icon__left interstate-icon-search' />
        ICON BUTTON
      </Button>
      <Button variant='outline' disabled className='m-2'>
        DISABLED BUTTON
      </Button>
      <Button variant='outline' className='m-2'>
        ICON BUTTON
        <i className='btn-icon__right icon interstate-icon-chevron-right' />
      </Button>
      <Button variant='outline' size='sm' className='m-2'>
        OUTLINE SMALL BUTTON
      </Button>
      <Button className='btn-icon-only m-2' variant='outline' size='sm'>
        <i className='icon interstate-icon-envelope' />
      </Button>
      <Button icononly disabled variant='outline' size='sm' className='m-2'>
        <i className='icon interstate-icon-envelope' />
      </Button>
    </Col>
  </Row>
</Container>

Text Buttons

With React, pass the textonly value to variant prop to the Button component. This will apply required styles, so it is not necessary to pass a color prop.

<Container>
  <Row>
    <Button variant='textonly' className='m-2'>
      TEXT BUTTON
    </Button>
    <Button variant='textonly' className='m-2'>
      <i className='icon btn-icon__left interstate-icon-search' />
      ICON BUTTON
    </Button>
    <Button disabled variant='textonly' className='m-2'>
      DISABLED BUTTON
    </Button>
    <Button variant='textonly' className='m-2'>
      ICON BUTTON
      <i className='btn-icon__right icon interstate-icon-chevron-right' />
    </Button>
    <Button variant='textonly' size='sm' className='m-2'>
      TEXT SMALL BUTTON
    </Button>
    <Button variant='textonly' icononly className='m-2'>
      <i className='icon interstate-icon-envelope' />
    </Button>
    <Button disabled variant='textonly' icononly className='m-2'>
      <i className='icon interstate-icon-envelope' />
    </Button>
  </Row>
</Container>

Alternative Button styles

Auxiliary Button

<Container>
  <Row>
    <Col>
      <Button variant='aux' className='m-1'>
        Auxiliary Button
      </Button>
    </Col>
  </Row>
</Container>

Action Link Button

Action links are text links that appear as an anchor but perform an action rather than direct the browser to a new URL via an href.

<Button variant='actionLink' onClick={() => alert('action link click')}>
  Action Link Button
</Button>

Floating Action Buttons

A contained button may be modified to create a floating action button by using the floatingAction value for variant prop. The floatingAction button accepts primary or secondary color styles via the color prop. The textonly or outline values cannot be used in conjunction with the floatingAction value for variant prop.

Only one floatingAction button can be used on a single page.

<>
  <div>
    The floating action button will overlay content and is locked to a specific
    position in the lower right of the screen.
  </div>
  <Button
    color='primary'
    variant='floatingAction'
    className='m-2'
    onClick={() => alert('This is a floating action button')}
  >
    <i className='icon btn-icon__left interstate-icon-plus' />
  </Button>
</>

Props

Name	Type	Default	Description
color	`string`	`"Primary"`	Sets the button styles to either Primary or Secondary
size	`string`	`"lg"`	Set the button size to either small 'sm' or large 'lg'
active	`bool`	`true`	Set the active state a button
disabled	`bool`	`true`	Disables button and applies disabled styles
icononly	`bool`	`false`	Sets styles for icon-only buttons
close	`bool`	`false`	For use with toggle close buttons
onClick	`function`	`null`	Sets a custom onClick function
variant	`string`	`null`	Use `outline`, `textonly`, `actionLink`, `aux`, `floatingAction` values for `variant` prop

Definition

Ingredients

The styles will be made up of Required, Selectable, and Optional classes.

Required

.btn - Class for our un-themed base button.

Selectable

Variants

.btn-primary - Solid Button
.btn-secondary - Outline Button
.btn-tertiary - Text Button

Sizes

Button is available in a specific range of sizes (SM - LG) and uses the following class names:

.btn-sm - Small button size
.btn-md - Medium button size
.btn-lg - Large button size

Optional

Types

.btn-icon - icon only buttons, use this when no text is used in the button
.btn-aux - auxilary buttons used to show a small control with no significance visually; has a fixed size; has a fixed variant

Floating

.btn-float - floating buttons fully round the button corners and adds a subtle drop shadow

Directions

Below we see several examples for buttons that show how the options above can be used.

Medium Secondary Icon Only Button

Medium buttons are the default size and align with default input sizes. Here we see a left placed icon with the label.

Large Primary Button

Large buttons are used to align with large inputs. Here we see a left placed icon with the label.

Small Tertiary Button

Small buttons are used to align with small inputs. Here we see a right placed icon with the label.

Floating Primary Button

Floating buttons are "lifted" above content using a subtle drop shadow and positioning. In this example, we are only showing the styles of the button, not giving it position within the page.

Auxilary Button

Auxilary buttons are special buttons used to show small controls but not so significant that it impacts scanability. (e.g. "Clear All")

Developer Kitchen

Now it's your turn! Select options for the Button component and see how they can be combined in the final output.

label

type

size

variant

Is Floating?

Show Left Icon?

Show Right Icon?

Button​

Description​

Sizes​

Usage​

Icons​

Hierarchy​

Scale Alignment​

Disabling Buttons​

Layout​

Variations​

Auxiliary Buttons​

Floating Action Buttons​

Best Practices​

Content and Labels​

Accessibility​

Styles​

Code​

Contained Buttons​

Outlined Buttons​

Text Buttons​

Alternative Button styles​

Auxiliary Button​

Action Link Button​

Floating Action Buttons​

Props​

Definition​

Ingredients​

Required​

Selectable​

Variants​

Sizes​

Optional​

Types​

Floating​

Directions​

Medium Secondary Icon Only Button​

Large Primary Button​

Small Tertiary Button​

Floating Primary Button​

Auxilary Button​

Developer Kitchen​

React​

Button

Description

Sizes

Usage

Icons

Hierarchy

Scale Alignment

Disabling Buttons

Layout

Variations

Auxiliary Buttons

Floating Action Buttons

Best Practices

Content and Labels

Accessibility

Styles

Code

Contained Buttons

Outlined Buttons

Text Buttons

Alternative Button styles

Auxiliary Button

Action Link Button

Floating Action Buttons

Props

Definition

Ingredients

Required

Selectable

Variants

Sizes

Optional

Types

Floating

Directions

Medium Secondary Icon Only Button

Large Primary Button

Small Tertiary Button

Floating Primary Button

Auxilary Button

Developer Kitchen

React