Bolt Button

Buttons are the core of our action components.

Loading...

Button is a branded component to convey call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button

Description

Buttons are the core of our action components. Their affordance is immediate and can be use for most actions and allow users to access the target with a single interaction. Buttons clearly provide a next step for the user.

Our Buttons depend on the theme they are contained in and change in appearance based on said theme. The themes and button colors were designed together to ensure the proper amount affordance and clarity.

Xlight and light themes

  • Primary: Light Indigo container with white text
  • Secondary: white button with indigo text
  • Text button: Light indigo text with chevron

Dark and xdark themes

  • Primary: Yellow container with default indigo text
  • Secondary: white button with indigo text
  • Text button: white text with chevron

  • Currently only have one defined size (though other options can and will be defined in the future)

  • Can be 100% width of the wrapper for mobile or card instances
  • Can optionally be 100% width. For example, the button has default width of 2 rem on either side on larger screens but full width on smaller screens

Dos

  • CTAs must be clearly and succinctly labeled with a next step
  • CTA should lead with strong action verbs
  • The primary CTA should be the most important action.
  • Be consistent in placement based on the screen size and device
  • Fall back to the text button in secondary and tertiary content areas where you can. For example, cards with a button use the text style so that a filled button doesn't become overwhelming and redundant.
  • Follow theming rules

Don'ts

  • Don't clutter the page with too many buttons
  • Don't mix and match themes and their button colors. For example, do not use the indigo button on dark and xdark themes as the indigo button does not stand out enough.
  • Don't mix and match colors outside the theme, see button groups.
  {% include "@bolt-components-button/button.twig" with {
  text: "Example Button"
} only %}

Buttons are the core of our action components.

Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

N/A
text* string

Button Text

The text displayed inside a button

N/A
transform string
  • uppercase, lowercase, capitalize, none

Text transformation.

none
icon object
  • @bolt-components-icon/icon.schema.yml > Object details
    • name

      Icon name.


      Type: string
      • academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, check-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, close-open, close-solid, close, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exit-full screen, external-link, eye-off, eye, facebook-solid, facebook, field-service-gray, field-service, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin-solid, linkedin, lock, manufacturing, map-pin-solid, map-pin, marketing-gray, marketing, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter-solid, twitter, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
    • background

      Background shape. This applies only to 'xlarge' icons.


      Type: string
      • circle OR square
    • size

      Icon size.


      Type: string
      • small, medium, large, xlarge
    • color

      Icon color. Currently only support default (black) and teal.


      Type: string
      • teal OR blue

Icon data as expected by the icon component. Accepts an additional 'position' parameter that determines placement within the button.

N/A
tag string
  • a, link, button, submit, reset

Semantic tag

What should this element semantically be?

button
size string
  • xsmall, small, medium, large, xlarge

Button Size

How large is this button?

medium
itemAlignment

DEPRECATED

Use the align parameter instead.

N/A
align string
  • start, center, end

Button Alignment

How should content be horizontally aligned? Note: the values left and right are DEPRECATED, use start and end instead.

center
style string
  • primary, secondary, text

Button Style

What's the button style / theme?

primary
width string
  • full OR full@small

Button Width

Should a button be full width, it's default size, or full width, but only on smaller screens?

N/A
rounded

DEPRECATED

Use the border_radius parameter instead

N/A
border_radius string
  • regular OR full

Border Radius

Amount of rounding that the corners of the button should have

regular
iconOnly boolean

Icon Only?

Is this an icon-only button (with visually hidden text)?

false

Button Border Radius Variation: regular

Button Border Radius Variation: full

Button Size Variation: xsmall

Button Size Variation: small

Button Size Variation: medium

Button Size Variation: large

Button Size Variation: xlarge

Primary Button States

Secondary Button States

Text Button States

Button theme: xdark

Button theme: dark

Button theme: light

Button theme: xlight

Button Width Variations: full

Button Width Variations: full@small

Button Tag: a

a-tag based Button

Button Tag: link

link-tag based Button

Button Tag: button

Button Tag: submit

Button Tag: reset

Align: start

Align: center

Align: end

Transform: uppercase

Transform: lowercase

Transform: capitalize

Transform: none

Button w/ Icon Position before



Button w/ Icon Position after



Button w/ Default Icon Position

Icon-only buttons display just an icon + visually hidden text if any text content is defined.

Icon Only? True Icon Only? False
Simple primary button
Simple secondary button
Simple text button
Simple primary button-link
Secondary disabled
Button with 1 slotted icon
Button with 2 slotted icons