Button

Live demo

Button styled links

button variants
Small button	Medium button	Large button

Icon buttons

icon buttons
Small button	Medium button	Large button

Loading buttons

ButtonDisabled

The ButtonDisabled component is used to create a disabled button with a tooltip to explain why the button is disabled.

Inherited text size links

This is a , hope you have enjoyed the show.

This is a , soz.

Fixed size links

links styles
Small link	Medium link

Design

Usage

Secondary buttons to be used alongside Primary buttons when there is a secondary action. In some instances secondary buttons can also be used as a standalone button.

Buttons come in two sizes, large to use as secondary CTAs Small buttons to be used where space is restricted, such as in dashboard controls and dialogs.

Specs

The buttons are constructed using master primitive components, based on colour and specific text styles. If the master primitive component is updated, the other instances will be updated too.

The text is positioned to be optically centered in the buttons. The buttons have 4 states:

Default
Hover
Focus (the style of this will apply to all other interactive components)
Disabled

Button large:

The large button is constructed from the ‘Button large‘ text style combined with horizontal and vertical padding values. The button width is determined by the width of the text, plus left/right padding, unless specified to be set a specific width, i.e. a to match a field set width. The button height works out at 56px tall.

Button small:

The large button is constructed from the ‘Button small‘ text style combined with horizontal and vertical padding values. The button width is determined by the width of the text, plus left/right padding, unless specified to be set a specific width, i.e. a to match a field set width. The button height works out at 44px tall.

Hover/Focus transition

0.25 ease (To be reviewed in browser)

Accessibility of disabled button

Use the disabled or aria-disabled attributes to convey information to screen readers.

Add to your disabled styles cursor: not-allowed this will serve as another visual indicator for mouse users.

Code

import { Button } from '@shieldpay/bumblebee/button';
import AnIcon from '@shieldpay/bumblebee/icons/AnIcon';

<Button
  aria-label={closeDialogText}
  onClick={onClose}
  variant="icon"
  Icon={AnIcon}
  size="large"
>
  Close
</Button>

<ButtonDisabled size="medium" variant="outline">
  Disabled
</ButtonDisabled>