Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @bolt/components-button-group with all npm packages installed. Try it out:

@bolt/components-button-group lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("@bolt/components-button-group/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@bolt/components-button-group v2.20.1

Button Group Component in Bolt

Button-group can contain multiple buttons. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button-group

Description

Button groups are a horizontal set of actions with a hierarchy that defines the spacing and their relationship between each other. This set of actions help people under stand their options with potential next steps.

Button padding left is 1rem when there are multiple buttons in a horizontal row.

Dos

  • Follow the button component guidelnes
  • Separate buttons by 1rem
  • Make sure the CTAs have a relationship with each other. If they don't reevaluate the content structure.
  • Be sure to consider the horizontal group of actions in smaller, less optimal sizes.
  • Be sure to determine the hierarchy of the CTAs in the group. These patterns are good:
    • Primary + secondary + text button
    • Secondary + text button
    • Primary + text button

Don'ts

  • Don't have multiple primary buttons grouped together
  • Don't have LESS than 1rem separating buttons
  • Don't have MORE than 1rem separating buttons
  • Don't have CTAs grouped together that do not relate to one another.

NOTE: We currently do not have joined buttons (eg, no gap, single button with two sides), but this is something to consider moving forward.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free