Button · Enma

Live demo

How to use it

The action control; secondary is the default and primary appears at most once per view.

Provide children (verb first, sentence case: "Start workout", "New invoice"), variant, size, and onClick.
primary uses --e-primary: lime on Graphite dark, ink on Glass and Paper, forest on Mineral, pink on Enamel, amber on Ember.
size="lg" with block for the main mobile action; sm for dense B2B toolbars.
loading shows a spinner in place of iconStart, sets aria-busy and ignores clicks until it ends; iconStart/iconEnd take an icon name.
The press is the theme's motion signature: a spring scale on most themes, a hard push into its shadow on Enamel.

Do: one primary per view, ghost buttons in toolbars. Don't: two primaries side by side, all-caps labels, "Click here", "Submit".

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { Button } from 'enma/react';

<Button variant="primary" size="lg" block onClick={startWorkout}>Start workout</Button>
<Button iconStart="download">Export</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="danger">Delete</Button>
<Button variant="primary" size="sm" loading>Saving</Button>

Plain HTML

<button type="button" class="e-btn e-sq e-btn--primary e-btn--lg e-btn--block">
  <span class="e-btn__label">Start workout</span>
</button>
<button type="button" class="e-btn e-sq e-btn--secondary e-btn--md">
  <span class="e-btn__label">Export</span>
</button>

Props

`ButtonProps`

Also accepts every attribute of React.ButtonHTMLAttributes<HTMLButtonElement>.

Props of ButtonProps
Prop	Type	Default	Description
`variant`	'primary' \| 'secondary' \| 'ghost' \| 'danger'	'secondary'	primary: one per view. secondary: default. ghost: toolbars and low emphasis. danger: destructive.
`size`	'sm' \| 'md' \| 'lg'	'md'
`block`	boolean
`loading`	boolean
`iconStart`	IconName
`iconEnd`	IconName
`as`	'button' \| 'a'	'button'
`href`	string