Button System - ERS Energy | Brand values which defines us

Overview

This design system defines the button components for ERS Energy applications. Buttons use the Inter font family with a consistent 8px border radius and three size variants.

Brand Colors

Core colors used for button variants.

Orange

#F26522

Teal

#669998

Dark

#313032

Button Specifications

Size and variant specifications for all button types.

Sizes

Size	Height	Padding	Font Size	Class
Small	32px	8px 16px	14px	`.btn-sm`
Medium	44px	12px 24px	16px	(default)
Large	52px	16px 32px	18px	`.btn-lg`

Variants

Variant	Background	Border	Text	Class
Primary	#F26522	#F26522	White	`.btn-primary`
Secondary	#669998	#669998	White	`.btn-secondary`
Dark	#313032	#313032	White	`.btn-dark`
Outline Primary	Transparent	#F26522	#F26522	`.btn-outline-primary`
Outline Secondary	Transparent	#669998	#669998	`.btn-outline-secondary`
Outline Dark	Transparent	#313032	#313032	`.btn-outline-dark`
Ghost Primary	Transparent	None	#F26522	`.btn-ghost-primary`
Ghost Secondary	Transparent	None	#669998	`.btn-ghost-secondary`
Ghost Dark	Transparent	None	#313032	`.btn-ghost-dark`

Filled Buttons

Primary actions and CTAs. Use sparingly for maximum impact.

Primary (Orange)

Secondary (Teal)

Dark

Outline Buttons

Secondary actions. Pairs well with filled buttons.

Primary Outline

Secondary Outline

Dark Outline

Dark Outline with Accent Text

Ghost Buttons

Minimal emphasis. For tertiary actions or inline links.

Button States

Interactive states including disabled and loading.

Default & Disabled

Loading State

Icon Buttons

Square buttons for icons and icon+text combinations.

Icon Only

Icon + Text

Action Buttons

Lightweight buttons for export actions, downloads, and secondary CTAs. Features a clean white background with orange accent on hover.

Default Action Buttons

CSS Class

.btn-action

CSS Variables

Copy and paste these variables into your stylesheet.

Button Token Variables

:root {
  /* TIER 3: COMPONENT TOKENS – Button */
  –button-height-sm: 32px;
  –button-height-md: 44px;
  –button-height-lg: 52px;

  –button-padding-sm: 8px 16px;
  –button-padding-md: 12px 24px;
  –button-padding-lg: 16px 32px;

  –button-font-sm: 14px;
  –button-font-md: 16px;
  –button-font-lg: 18px;

  /* Button colors (using semantic tokens) */
  –button-bg-primary: var(–orange-9);
  –button-bg-primary-hover: var(–orange-10);
  –button-bg-secondary: var(–teal-8);
  –button-bg-secondary-hover: var(–teal-9);
  –button-bg-dark: var(–charcoal-10);
  –button-bg-dark-hover: var(–charcoal-11);

  /* Button styling */
  –button-radius: var(–radius-md);
  –button-font-weight: var(–font-weight-medium);

  /* Focus ring (WCAG 2.2) */
  –focus-ring-width: 2px;
  –focus-ring-offset: 2px;
  –focus-ring-color: var(–orange-9);
}

v2 Component Pattern

The v2 design system uses BEM naming with data-attributes for variants and states. This enables cleaner markup and better CSS specificity control.

BEM + Data-Attributes Pattern

<!– Primary Button –>
<button class=”ers-btn” data-variant=”primary” data-size=”md”>
  Button Text
</button>

<!– Outline Secondary –>
<button class=”ers-btn” data-variant=”outline-secondary” data-size=”lg”>
  Large Outline
</button>

<!– Ghost with Icon –>
<button class=”ers-btn” data-variant=”ghost” data-size=”sm”>
  <svg>…</svg>
  Ghost Button
</button>

Available Data Attributes

Attribute	Values
`data-variant`	primary, secondary, dark, outline-primary, outline-secondary, outline-dark, ghost, ghost-primary, ghost-secondary
`data-size`	sm, md (default), lg
`data-loading`	true, false
`data-icon-only`	true (for square icon buttons)

Usage Guidelines

Best practices for using buttons in the ERS Energy design system.

Hierarchy Best Practices

Use Primary (Orange) for the main CTA – limit to one per view
Use Secondary (Teal) for supporting actions
Use Dark for alternative emphasis or neutral actions
Use Outline buttons alongside filled buttons to create hierarchy
Use Ghost buttons for tertiary actions or inline text links

Accessibility

All buttons meet WCAG AA contrast requirements
Minimum touch target of 44px height on medium size
Visible focus state with 2px outline offset
Disabled buttons have reduced opacity (40%)