button-filled

Core components

Buttons

All buttons are created using consistent design principles

Unified Design: Buttons follow a consistent design language for size, spacing, color, and style.
Standardized Icons: We maintain a library of universally recognizable icons.
Modular Components: Buttons are reusable and customizable.

Button sizes

Example uses Primary but applies to all button types

Height 48px/3rem
Label/Large 16px/1rem

Height 40px/2.5rem
Label/Large 14px/ 0.875rem

Height 32px/2.rem
Label/Large 12px/ 0.75rem

For full details see spec table below

Button states

Example uses Primary but applies to all button types

Default

Hover

Pressed

Focussed

Disabled

Button roles

Example uses Primary but applies to all button types

Primary
primary.40

Secondary
secondary.40

Tertiary
tertiary.40

Error
error.40

Info
info.40

Neutral-variant
neutral-variant.40

Button roles - Usage

Primary Button

Usage: Primary buttons are typically used for the most important actions or functions in an interface. They should stand out and draw the user's attention.
Example: "Submit", "Save Changes", "Create Account".

Secondary Button

Usage: Secondary buttons are used for actions that are important but less critical than primary actions. They provide a clear visual distinction from primary buttons.
Example: "Cancel", "Back", "View Details".

Tertiary Button

Usage: Tertiary buttons are used for less prominent actions or as supplementary options. They are often smaller or less visually emphasized compared to primary and secondary buttons.
Example: "More Options", "View All", "Help".

Neutral Variant Button

Usage: Neutral buttons are used for actions that are neither primary nor secondary but are still important for user interaction. They typically blend into the interface without drawing too much attention.
Example: "Dismiss", "Close", "Accept Cookies".

Danger Button

Usage: Danger/Error buttons are used to indicate actions that could potentially result in an error or have negative consequences. They often prompt the user to confirm or reconsider their action
Example: "Delete", "Cancel Subscription", "Remove Account".

Info Button

Usage: Info buttons are used to provide supplementary information or help to users. They typically trigger tooltips, pop-ups, or expandable sections with more details.
Example: "Learn More", "Info", "Tooltip".

Button anatomy/spec table The overall height of the buttons is fixed at three sizes: small (32px), medium (40px), and large (48px). These fixed heights ensure that the buttons align perfectly with a 4px grid system, as well as with adjacent components and text.

x-space x-space

Text label Corner Radius x-space x-space Line-height Overall component height

Gap Icon

Important! Use Line-height in button construction It is important to use the line-height of the text label when constructing buttons. Line-heights are calculated to be multiples of 4 to ensure proper vertical spacing. Note that the text size itself may not always be a multiple of 4 or divisible by 4.

Small

Medium

Large

Anatomy

Small

Medium

Large

Height

32px / 2rem

40px / 2.5rem

48px /3rem

Shape (Corner Radius)

4px / 0.25rem

Label

label small - 12px / 0.75rem

label medium - 14px / 0.875rem

label large - 16px / 1rem

Icon holder size

16px / 1rem

20px / 1.25rem

24px / 1.25rem

Left/right padding

12px / 0.75rem

16px / 1rem

24px / 1.5rem

Gap (Padding between elements)

12px / 0.75rem

16px / 1rem

20px / 1.25rem

Label text alignment

Center-aligned

Button - Accessibility

In creating buttons, prioritize accessibility to ensure effective interaction for all users, including those with disabilities. This involves implementing features like clear text labels, sufficient color contrast for visually impaired users, and keyboard accessibility.

Button Label: Use clear and descriptive text labels for buttons to communicate their purpose effectively. The label should succinctly describe the action or function associated with the button. Avoid vague or ambiguous labels that may confuse users, especially those relying on screen readers.
Color Contrast: Ensure sufficient color contrast between the button text and background to improve readability, particularly for users with visual impairments. Follow WCAG guidelines for color contrast ratios to ensure that text is easily discernible against the button background.
Keyboard Accessibility: Make buttons keyboard accessible to accommodate users who navigate using keyboards or assistive technologies. Ensure that users can focus on buttons using the Tab key and activate them using the Enter or Spacebar keys. Keyboard accessibility is crucial for individuals with motor disabilities or those who cannot use a mouse.
Focus Styles: Provide clear and visible focus styles for buttons to indicate when they are in focus. This helps users understand which button is currently selected, particularly when navigating using keyboards or screen readers. Ensure that focus styles comply with WCAG standards for visibility and contrast.
Semantic HTML: Use semantic HTML elements such as <button> for buttons to convey their interactive nature to assistive technologies. Semantic markup improves accessibility by providing context and structure to content, aiding screen readers in interpreting the purpose of the button.
ARIA Attributes: Utilize ARIA attributes to enhance the accessibility of buttons. ARIA attributes like role, aria-label, and aria-labelledby provide additional information to assistive technologies about the purpose and function of buttons, improving their accessibility for users with disabilities.
Size and Touch Target: Ensure that buttons have an adequate size and touch target to accommodate users with limited dexterity or precision. Larger buttons with sufficient spacing are easier to interact with, reducing the risk of accidental activations and improving accessibility for all users.

Contact us. If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com

CORE DESIGN SYSTEM

Foundations