Button

MYDS-compliant button component for seamless transition starting point from HTML/CSS to React

Overview

The MYDS HTML/CSS Button provides flexible variants and consistent styling for applications not using React. It ensures proper state handling (hover, focus, disabled), and design harmony across public-sector interfaces.

1. Setup

Follow these steps to prepare the button styles in your HTML project.

Recommended Import Order Make sure to load the stylesheets in this sequence to ensure proper styling:

<link rel="stylesheet" href="reset.css" />  <!-- refer to ResetCSS -->
<link rel="stylesheet" href="button.css" /> <!-- refer to ButtonCSS -->
<link rel="stylesheet" href="button-dark.css" /> <!-- refer to ButtonDarkCSS -->

This guarantees that:

The CSS reset applies first.
The button base styles override the reset where necessary.
The dark theme styles apply last, so they can override both the reset and base button styles when needed.

Step 2 - Include the required font

The Inter font is part of the MYDS design guidelines. Add it inside your <head>:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Your <head> should look similar to:

<head>
  <!-- Inter Font -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
 
  <!-- Design System Stylesheet -->
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="button.css" />
  <link rel="stylesheet" href="button-dark.css" />
</head>

2. Usage

All buttons use the base class:

<button class="button-myds">...</button>

To apply styles, add one of the variant modifier classes:

button-myds-primary
button-myds-secondary
button-myds-secondary-color
button-myds-tertiary
button-myds-tertiary-color
button-myds-danger-primary
button-myds-danger-secondary
button-myds-danger-tertiary

3. Variants

Primary

Secondary

Secondary Color

Tertiary

Tertiary Color

Danger - Primary

Danger - Secondary

Danger - Tertiary

4. States

Each variant supports:

Default
Hover
Focused
Disabled

5. Anatomy

Selector	Purpose
`.button-myds`	Base layout and reset
`.button-myds-[variant]`	Defines visual appearance
`:hover`	Hover interactions
`:focus`	Focus ring for accessibility
`:disabled`	Disabled appearance and cursor style

6. Customization

You can override default styles in your stylesheet Example:

.button-myds.button-myds-primary {
  background-color: #1e40af; /* Custom primary color */
}

7. Accessibility

Built with the native <button> element
Keyboard navigation supported with visible focus ring
Disabled state uses the native disabled attribute

Button

On this page