Button — ELF Design System 2.0

Button

Trigger actions or events, such as submitting forms, opening dialogs, or navigating to other pages.

Documentation

Code

Status & Change logs

4.13.26

None-breaking

Added Button component to the ELF Design System with full variant, size, semantic, and state support.

Added three button types: Primary (filled), Secondary (outlined), and Tertiary (ghost).

Added three size variants — Small (36px), Medium (40px), and Large (44px) — to support varied UI density needs.

Added four semantic color options: Default (blue), Success (green), Alert (amber), and Error (red).

Added five interactive states: Default, Hover, Focused, Disabled, and Loading with animated spinner.

Added optional Leading and Trailing icon slots via leadingIcon and trailingIcon props.

Added ELF Flutter component ElfButton with complete prop API across all types, sizes, and states.

Added Raw Flutter code generation with ElevatedButton, OutlinedButton, and TextButton patterns.

2.18.26

None-breaking

Updated disabled state background from #EBEBEB to #F5F5F5 to improve contrast ratio on white surfaces.

Fixed focus ring offset value to 2px consistently across all semantic variants — previously inconsistent on Error and Alert.

Improved Loading state spinner animation timing from 1s to 0.7s for a snappier feel.

Breaking

Renamed semantic: defaultSemantic to semantic: default in the ElfButton component API to align with ELF token naming.

12.4.25

None-breaking

Added Loading state with an animated circular spinner and "Loading..." label text, replacing the previous spinner-only approach.

Updated border-radius from 6px to 8px to align visually with the ELF card and input field system.

Added Alert semantic color (#F79009) to button to match the system-wide warning token introduced in ELF 0.8.

Quality of life change: Secondary button hover background now reads from colorLight semantic token instead of a hardcoded hex value.

Breaking

Removed size: xl — the extra-large variant has been consolidated into size: large to reduce redundancy across all platforms.

Renamed prop variant to type across all button instances to align with ELF-wide component naming conventions.

10.15.25

None-breaking

Quality of life change: Added leadingIcon and trailingIcon props, replacing positional icon arguments for clearer intent.

Updated Secondary button colors to use backgroundSecondary token for hover and active states.

Fixed Tertiary button focus state color bleeding into adjacent sibling elements due to a missing isolation: isolate rule.

Linked all trailing icon instances to the Instance swap property, which will reset overrides on buttons with Trailing icons enabled.

Overview

The Button component is a fundamental interactive element that triggers actions or events — such as submitting forms, opening dialogs, navigating to a new page, or confirming a choice. Buttons communicate affordance and hierarchy, guiding users toward primary and secondary actions with clarity.

Types Primary · Secondary · Tertiary

Sizes Small · Medium · Large

Semantics Default · Success · Alert · Error

States Default · Hover · Focused · Disabled · Loading

Anatomy

2 3 4 Get Started

1 Container

2 Leading Icon (optional)

3 Label

4 Trailing Icon (optional)

Button Types

Get Started

Primary

High emphasis. Use for the main call-to-action in a view. Use only once per section or screen.

Get Started

Secondary

Medium emphasis. Use alongside a Primary button for supporting or alternative actions.

Get Started

Tertiary

Low emphasis. Use for less important actions, inline links, or destructive actions in context.

Sizes

Large

Get Started

Height44px

Padding0 24px

Font14px / 600

Medium

Get Started

Height40px

Padding0 24px

Font14px / 600

Small

Get Started

Height36px

Padding0 20px

Font12px / 600

Semantic Colors

Action

Default

General actions & navigation

#006CB6

Confirm

Success

Positive confirmations & saves

#15B36A

Warning

Alert

Warnings & cautionary actions

#F79009

Delete

Error

Destructive & irreversible actions

#D92D2D

States

Action

Default

Resting state; ready for interaction

Action

Hover

Cursor over the button

Action

Focused

Keyboard / tab focus ring visible

Action

Disabled

Not interactable; greyed out

Async operation in progress

Usage Guidelines

Use one Primary button per section as the main call-to-action.

Use clear, verb-first labels: "Save Changes", "Get Started", "Confirm".

Pair Primary with Secondary or Tertiary for supporting actions.

Use semantic variants (Error, Success, Alert) to match the context and tone.

Show Loading state while awaiting a response to prevent double submission.

Don't

Don't place two Primary buttons side-by-side — it dilutes emphasis.

Avoid vague labels like "Submit", "Click Here", or "OK" without context.

Don't disable a button without explaining why through nearby helper text.

Don't use icons on both sides when a single icon already conveys direction.

Avoid using the Error semantic for anything that isn't destructive or irreversible.

Button Variants

Artboard

Code