Button · Enterprise Design System

Overview

One button primitive (.btn) with role variants: primary, standard (default), danger, and link. Standard height is 32 px with a .sm modifier dropping to 28 px. Icons sit before the label with a 6 px gap.

Use cases

Form submission. Use .primary for save, submit, or confirm — at most one primary per view.
Destructive actions. Use .danger for delete or revoke. Always pair with a confirmation modal.
Cancel / dismiss. Use .link for secondary actions you don't want to encourage.
Toolbars. Combine standard buttons left + primary action right (<div style="flex:1"> as spacer).

Properties

Property	Type	Default	Description
`class`	string	`.btn`	Base class. Add role + size modifiers as additional classes.
role variant	`primary` · `danger` · `link`	—	Visual style. Omit for the standard (secondary) role.
size variant	`sm`	—	Compact 28 px height. Omit for the standard 32 px height.
icon	SVG sprite reference	—	Use `<svg class="icon-svg sm"><use href="#i-..."/></svg>` before the label.
`disabled`	boolean attr	false	Native HTML disabled attribute. Dims visually and disables click.

Types & styles

Style	When to use	Class
	Main action on a page or modal — save, confirm, submit.	`.btn.primary`
	Default style for secondary actions.	`.btn`
	Destructive actions — always pair with a confirmation step.	`.btn.danger`
	De-emphasized actions — cancel, dismiss, secondary navigation.	`.btn.link`

Sizes

Size	Height	When to use	Class
	32 px	The default everywhere — forms, modals, page headers.	`.btn`
	28 px	Dense toolbars, table-row inline actions, dropdown footers.	`.btn.sm`

Best practices

One primary per view. Every page or modal should have at most one primary button to create a clear visual hierarchy.
Label with verbs. Use action words — "Save", "Delete", "Export" — not vague labels like "OK" or "Submit".
Pair destructive with confirmation. A .danger button should always open a confirmation modal before executing.
Icon-only buttons need tooltips. If a button has no visible text, supply a title attribute or aria-label for accessibility.
Disabled ≠ hidden. Use the disabled state to show an action exists but isn't available yet. Don't hide buttons the user expects to see.

Composition

Toolbars. Secondary buttons on the left, primary action on the right. Use <div style="flex:1"></div> as a spacer between them.
Modals / panels. Cancel on the left, primary on the right. Always in that order — even if your design tool defaults the other way.
Destructive actions. Keep them on their own row, often with margin-right:auto, so they don't sit adjacent to the confirm button.