Buttons

How to Use

To use a button on the site, use the native <button> element and apply the appropriate class names based on size, style, and color.

Basic structure:

<button class="[size] [style] [color]">
    Button Text
</button>

Size options

  • small
  • medium
  • large

Style options

  • filledHighlight: Bold, high-attention button
  • filledTinted: Softer version with light background
  • None: Neutral/gray style
  • disabled: Visually and functionally disabled button

Color options

  • primary: Main brand color
  • secondary: Neutral or secondary color

Button Types and When to Use Them

✅ filledHighlight

  • Example: <button class="medium filledHighlight primary">Submit</button>
  • Purpose: Use for primary, high-importance actions like submitting a form, saving changes, or continuing a flow.
  • Visual: Strong background color with contrast text. Eye-catching.
  • Use When: You want the button to be the most noticeable action on the screen.

✅ filledTinted

  • Example: <button class="medium filledTinted primary">Learn More</button>
  • Purpose: Use for secondary actions that still need attention but shouldn’t overpower the main CTA.
  • Visual: Light background with a tint of color.
  • Use When: You want to provide options without stealing focus from a primary action.

✅ primary (gray, no fill style)

  • Example: <button class="medium primary">Cancel</button>
  • Purpose: Use for neutral actions that don’t need color emphasis.
  • Visual: Typically gray or low-contrast; looks like a flat button.
  • Use When: Providing backup options or non-critical actions like “Back,” “Skip,” or “Cancel.”

✅ secondary (gray, no fill style)

  • Example: <button class="medium secondary">Undo</button>
  • Purpose: Similar to primary gray buttons, but differentiated for alternate styling needs.
  • Use When: You need a second neutral button beside another, or when a visual distinction between two neutral actions is helpful.

❌ disabled

  • Example: <button class="medium disabled">Submit</button>
  • Purpose: Used to show that an action is not currently available.
  • Visual: Dimmed button, not interactive.
  • Use When: An action depends on another condition (like a form needing to be filled), or when something is not ready yet.

Additional Notes

  • Always include meaningful button text. Don’t rely solely on icons or visuals.
  • Accessibility: Disabled buttons should still be semantically clear. If not using the disabled attribute, consider adding aria-disabled="true" as well.
  • Avoid overusing filledHighlight. Use it sparingly to emphasize the true primary action.

Examples

The names of the buttons are their class names.