Bugcrowd Design System

Bugcrowd Design System

Search/

Buttons

Last modified:

Use buttons for actions such as “Save”, “Cancel”, or “Add”.

Example of Buttons - default

<div className='bc-flex bc-flex--wrap bc-flex--justify-center bc-helper-gap'>
  <BcButton>Save</BcButton>
  <BcButton variant='secondary'>Add</BcButton>
  <BcButton variant='secondary' size='sm'>Follow</BcButton>
  <BcButton variant='tertiary'>Cancel</BcButton>
  <BcButton variant='positive'>Start</BcButton>
  <BcButton variant='negative'>Stop</BcButton>
  <BcButton variant='brand'>Bugcrowd</BcButton>
  <BcButton variant='link'>Edit profile</BcButton>
  <BcButton disabled>Submit report</BcButton>
  <BcButton isFullWidth variant='secondary'>Expand</BcButton>
</div>
Open in Playroom

React documentation

Last modified:

ℹ️ Note the BcButton component only supports <buttons>. If you need to style an anchor visually as a button please manually add the .bc-btn class(es).

BcButton props

PropTypeRequired?DefaultPurpose
isFullWidthbooleanoptionalTakes whole block space.
variantstringoptionalSwitches between variants, see more below.
sizestringoptionalSwitches between sizes, see more below.

Possible values for variant prop

Note the default BcButton/.bc-btn style is the (blue) primary style.

variant valuesPurpose
secondaryUse for all other actions other than the default button. Used in the Inline control group pattern.
tertiaryTransparent background — the most subdued button style.
positiveUse to denote an action that is highly encouraged of the user. To be treated like a primary action per page or modal.
negativeUse to denote actions that are highly discouraged of the user, destructive or undoable. Use on the final confirmation of a irreversible destructive action.
brandReserved for marketing purposes. Use sparingly and avoid combining with the small size variant; only WCAG 2 A compliant.
linkUse for actions that require the button to be styled as inline text. Do not style anchors as link buttons — simply use an anchor and its styles.

Any extended types: React.ButtonHTMLAttributes<HTMLButtonElement>.

Possible values for size prop

PropValueDescription
sizelgMakes the button size to large (131 x 54 pixels approximately).
sizesmMakes the button size to small (88 x 31 pixels approximately).

Current rendered optical default height is ~42px when the size prop is undefined.

Note the sm size does not reduce the button’s font-size. We do this to maintain UI text readability.

HTML

Last modified:

“Button” styles are applied to <button>s and sometimes <a> anchors.

Note however that anchors and button tags have intrinsic differences in purpose and function. See Accessibility for more about buttons vs. links.

Avoid:

  • Re-implementing your own button on a <div> for a custom component when a custom-styled <button> does the job.
  • Custom tabindexes (unless absolutely necessary or intentional within a given context).
  • Styling anchors that link to a resource
  • Not setting a href — an anchor without a href is removed from the tab order and not otherwise accessible to assistive technologies.

You can use anchors styled as buttons for ‘actions’ that:

  • Cancel a process and don’t change state
  • Link to a resource with a user-defined or generated URL parameter.

Using classes for complex state management

Due to limitations with HTML–CSS or in custom JavaScript components sometimes it isn’t possible to provide the correct state styles for :focus, :hover, and :active, eg. when transposing :focus from an input[type=radio] to a sibling span, all nested inside a <label> (see Control inputs).

For this reason the states are exposed as BEM variant classes, auto-styled to match the buttons style they’re appended to:

  • :focus: .bc-btn--focus
  • :hover: .bc-btn--hover
  • :active: .bc-btn--active

Design

Last modified:

👉 See all possible button styles and states at once in the Buttons test file.

There are 3 core button styles:

VariantPurpose
Use for the main single action in the user flow, page, or feature. A primary button should only appear once per page (not including modal actions).
Use for actions that have equal importance in a page.
Used in the Inline control group pattern.
Use for an even more subdued style for less important or less commonly used actions.

This 3-tier structure can be extended sparingly by:

Other variantsPurpose
For actions that are highly encouraged of the user. To be treated like a primary action per page or modal.
Use sparingly.
For actions that are highly discouraged of the user, destructive or undoable.
Use on the final confirmation of a irreversible destructive action.
Reserved for marketing purposes.
Use sparingly and avoid combining with the --small variant; only WCAG 2 Level A compliant.
For actions that require the button to be styled as inline text.
Do not style anchors as link buttons — simply use an anchor and its styles.

Adding an icon to a button

Icons can be added to buttons in 3 ways:

  1. Using the new <BcIcons /> component!
  2. By using a mixin, and providing the SVG as a background-image (to be deprecated).
  3. By using a class (that implements the mixin’s defaults) and providing the SVG as a background-image (to be deprecated).

Accessibility

Last modified:

Buttons:

  • Receive keyboard focus by default
  • “Click” with the Space key
  • Submit form data to a server
  • Reset a form
  • Toggle something in an interface
  • Trigger new content like opening a modal
  • Be disabled with the disabled attribute
  • Instruct a screen reader with the implicit button role
  • Show :focus, :hover, :active, :disabled.

Links (<a>):

  • Create hypertext links — a network of online resources
  • Register a click with the Enter key
  • Navigate the user to a new page or view
  • Change the user agent URL
  • Can cause a browser redraw/refresh
  • Support page jumps with internal href attributes
  • Deep-link client-rendered applications
  • Are focusable by default with the href attribute
  • Have the implicit link role
  • Can’t be disabled like buttons but can be made inert with tabindex="-1" and aria-hidden="true"
  • Allow opening in new windows
  • Show :link, :visited, :focus, :hover, & :active.

For more in-depth info check out Marcy Sutton’s Links vs. Buttons in Modern Web Applications.

Rationale

Last modified:

Badges or “pills” provide scannable visual indicators used for marking or labelling important data points.

Alignment and ordering

  • Left-align buttons, with the primary action coming first. This follows the “F” or “Z” eye movement reading pattern users typically use to scan the page, particularly in forms.
  • Buttons in modals are right-aligned, with primary button on the right. This is typically due to the behavior of confirming actions in a modal and dismissing it at the same time.
  • Actions that interact with a data point such as ‘Edit’ is aligned to the right of the container inline with the heading or data point. This is to maintain visual proximity to the affected data point or section.

Visual distinction

When separating common actions from less common actions:

  • Use primary, secondary, and tertiary styles in this order to distinguish order of importance and hierarchy.
  • Use the small size modifier to further differentiate nested or tertiary functionality in a page.

ℹ️ If all actions in a page share equal or little importance, use only secondary or tertiary styles.

Correct grouping examples

ExampleNotes
Nudges the user to take the preferred or most common action.
Offers an subdued option to cancel or perform an alternative action.
Secondary style for less common actions.

Incorrect button grouping examples

ExampleNotes
Uses more than one primary button in a page.
Uses strong, opposing button styles together.

See also

Last modified:

  • Inline control group (Pattern)
  • Dropdown menu (Pattern)