Button

Releasedshipped in 0.1.0ClearedStorybookFigma node 26:1657Source

Usage

When to use it

Use this component when need CTA.

From the Lumo.Web.Component.V1.0.Complete library — the button description, read 2026-10-19.

Where it goes

• in a card footer action row, and in an empty state Action slot

When not to use it

• Don’t use it for opening external link.
  • No alternative named. The source states the prohibition without saying what to reach for instead.

What each variant is for

Property	Value	What it is for
type	fill	not stated in the source
type	outline	not stated in the source
type	transparent	not stated in the source
state	default	not stated in the source
state	hovered	not stated in the source
state	focused	not stated in the source
state	disabled	not stated in the source
state	error	not stated in the source

Variant meanings are not stated

The component description says what the component is for, never what an individual value means. Every value above is implemented and tested; what each one is for is a design decision nobody has written down.

Owner: human:designer

Accessibility

• state=“disabled” sets the real DOM disabled attribute, and rest props are spread first so a caller cannot reach past the component and re-enable it
  src/components/button/button.jsx:73
• an icon-only button takes its accessible name from label via aria-label, because no text is drawn
  src/components/button/button.jsx:74
• the icons are aria-hidden decoration
  src/components/button/buttonIcon.jsx:17
• htmlType defaults to “button”, so it cannot submit a form by accident
  src/components/button/button.jsx:41

Composition

Nothing in the stories shows this component composed with another.

What this version promises

See Versioning. At 0.1.0 the public surface is the named exports of src/index.ts; this component is one of them. This component’s release verdict is Cleared and its Development status reads Released. A Cleared verdict is a recommendation with reasons, recorded in its release review — a human decides whether a release happens, and no agent approves its own work.

Examples

Every story that is not a variant-matrix row, embedded live from the deployed Storybook in both themes. The matrix itself is on the Design tab.

Fill Default

Fill Hovered

Fill Focused

Fill Disabled

Fill Error

Outline Default

Outline Hovered

Outline Focused

Outline Disabled

Outline Error

Transparent Default

Transparent Hovered

Transparent Focused

Transparent Disabled

Transparent Error

Content Permutations

Icon Names

Transparent — on a surface

Interactive

Disabled — genuinely inert

Icon only — still labelled

Code

Import

import { Button } from '@ds-house/lumo-design-system';

Props

Prop	Type	Default	Notes
type	`‘fill’	‘outline’	‘transparent’`
state	`‘default’	‘hovered’	‘focused’
label	string	'Button'	Figma label. The button text.
text	boolean	true	Figma text. Shows the label.
iconLeft	boolean	true	Figma iconLeft. Shows the leading icon.
iconRight	boolean	true	Figma iconRight. Shows the trailing icon.
iconLeftName	string	'add'	Material Symbols glyph for the leading icon.
iconRightName	string	'add'	Material Symbols glyph for the trailing icon.
htmlType	`‘button’	‘submit’	‘reset’`
onClick	() => void	—
className	string	''

Union types

• type: 'fill'|'outline'|'transparent'
• state: 'default'|'hovered'|'focused'|'disabled'|'error'
• htmlType: 'button'|'submit'|'reset'

Tokens it needs

Token	Light	Dark
--border-radius-input	not in the build	—
--border-width-default	not in the build	—
--border-width-focused	not in the build	—
--button-button1	not in the build	—
--color-bg-base	not in the build	—
--color-bg-disabled	not in the build	—
--color-bg-negative-idle	not in the build	—
--color-bg-primary-hovered	not in the build	—
--color-bg-primary-idle	not in the build	—
--color-bg-primary-pressed	not in the build	—
--color-bg-primary-tonal-idle	not in the build	—
--color-border-brand-hovered	not in the build	—
--color-border-primary-disabled	not in the build	—
--color-border-primary-focused	not in the build	—
--color-icon-actionpressed	not in the build	—
--color-icon-brand	not in the build	—
--color-icon-disabled	not in the build	—
--color-icon-negative	not in the build	—
--color-icon-onaction	not in the build	—
--color-icon-onfocus	not in the build	—
--color-icon-onhovered	not in the build	—
--color-text-accent-aqualight	not in the build	—
--color-text-actionpressed	not in the build	—
--color-text-brand	not in the build	—
--color-text-disabled	not in the build	—
--color-text-negative	not in the build	—
--color-text-onaction	not in the build	—
--color-text-onfocus	not in the build	—
--color-text-onhovered	not in the build	—
--motion-duration-fast	not in the build	—
--size-icon-md	not in the build	—
--spacing-padding-sm	not in the build	—
--typography-fontweight-regular	not in the build	—

A dash under Dark means the token does not change between themes.

Storybook’s own props table

Design

The Figma node

The embed may not load

The Figma file is team-only. If the frame above is blank, open the node directly from the header link — a 403 from a team-only file is expected, not a broken link.

The variant matrix

Each row as the set draws it, in both themes.

All Variants

Open in Storybook

What Figma never bound, and the gaps recorded against it

— reported, not filled in

1. transparent/focused has no focus indicator. Node 29:1800 renders no border and no ring at all — the variant is distinguished only by a darker label. (get_variable_defs does list border/width/focused against the node, but get_design_context returns no border properties, so there is no edge to resolve a colour for. Don’t go looking for a half-finished binding; there is nothing there to complete.) A focusable control with no visible focus indicator fails WCAG 2.4.7. The state="focused" prop reproduces the node exactly so QA can compare, but real keyboard focus gets the ring that fill and outline already use (border-primary-focused at border-width-focused) rather than an invented value. A designer should decide what transparent focus looks like.

2. Outline stroke alignment is inconsistent. Four outline variants are 120x38 (1px outside stroke); outline/focused is 118x36 (2px inside). These cannot both be right. The component uses an inside stroke throughout — see above — but the node needs fixing either way.

3. Two accent-aqua variables share one description. The library has both color/text/accent/aqua (aqua/800, #176e82) and color/text/accent/aquaLight (aqua/600, #16bee3), and both carry the identical description “lumo.semantic.color.text.accent.aqua — Accent Colors · aqua foreground”. The Figma MCP compounds this by rendering both as --lumo-semantic-color-text-accent-aqua, with only the resolved value to tell them apart. Button binds aquaLight; this was caught by measuring the rendered colour against the node, not by reading the name. The descriptions should be made distinct before this trips someone else.

4. Icon tokens are doing border duty. outline/default takes its border from color/icon/brand and outline/error from color/icon/negative, while color/border/brand/default and color/border/negative/default both exist and are unused here. The component follows what the node binds. Worth a designer’s pass — the border roles exist for this.

5. transparent/focused colours the label with a background token. color/bg/primary/pressed is used as a text colour. It resolves to a readable value, but the role is wrong; color/text/actionPressed is what outline/focused uses for the same job.

6. Gap uses a padding token. Every variant sets its flex gap from spacing/padding/sm rather than spacing/gap/horizontal/sm. Both are 8px so nothing renders wrong, but the roles are not interchangeable.

From the build report, docs/button.md.

Where Figma and this repo disagree across the system, see the disagreements record.

Changelog

Every commit touching this component and its subcomponents — a change to a subcomponent changes the component, and a log that reads only the parent file misses it.

Commit	Date	Shipped in	Subject
2b94809	2026-10-19	unknown	Write the ten component intent files
c8bc699	2026-10-18	unknown	Add the test suite, and retire the deliberate stop
9525e0f	2026-10-17	unknown	Make the repo a publishable npm package
d501bea	2026-10-03	unknown	Fix QA findings F1, F2, F3, F5 on Button
74ef51a	2026-10-03	unknown	Add Button component, built from Figma node 26:1657

Generated from commit 7ccfbbb53757.