# Button

A button performs an action on the screen it is on: save, open, delete. To go to another page, it is a Link.

## Playground

```html
<button class="feitio-button" type="button">Save changes</button>
```

## When to use

-   For an action that happens here: save, send, open a Dialog.
-   For the main action of a form, at its end.

## When not to use

-   **To go to another page:** use a Link, even if it looks like an action.
-   **Several oranges on one screen:** only one is the main action.

## Examples

### Primary

The action the screen exists for. Orange, and at most one per screen.

Show code

```html
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>
```

### Default

Every other action. When in doubt, it is this one.

Show code

```html
<button type="button" class="feitio-button">Cancelar</button>
```

### Danger

Actions that destroy or cannot be undone. Wine, never orange, and always with a Dialog before acting.

Show code

```html
<button type="button" class="feitio-button" data-variant="danger">Apagar agendamento</button>
```

### With icon

The icon comes before the word and goes with it, never in its place.

Show code

```html
<button type="button" class="feitio-button">
  <svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
  Novo agendamento
</button>
```

### Sizes

Small for bars and tools, default for almost everything, large for the action of a whole page.

Show code

```html
<button type="button" class="feitio-button" data-size="small">Pequeno</button>
<button type="button" class="feitio-button">Padrão</button>
<button type="button" class="feitio-button" data-size="large">Grande</button>
```

## Anatomy

1.  **Box:** Feitio’s uneven corners and the 1px ink line.
2.  **Icon**, optional: always before the word.
3.  **Label:** verb and object.
4.  **Focus:** the orange outline, whenever the keyboard arrives.

## States

-   **Hover:** the paper lifts a little.
-   **Focus:** the orange outline, whenever the keyboard arrives.
-   **Waiting:** says what it is doing ("Saving…") and ignores another tap.

## Do and don’t

Do

Save changesCancel

A single orange, with verb and object.

Don’t

OKCancel

Two oranges and an "OK" that says nothing.

## Writing

-   Verb and object: "Save changes", "Delete schedule". Never "OK" or "Yes".
-   Two or three words; capitalize the first only.

## Accessibility

-   It is a real `<button>`, with a `type`: keyboards and screen readers already know it.
-   Icon only, with no word, gets an `aria-label`.
-   A target of at least 40px, even when small.

## Attributes

Attribute

Values

What for

`class="feitio-button"`

required

The Feitio button.

`data-variant`

`"primary"`, `"danger"`

Primary (orange) or danger (wine). Without it, the default.

`data-size`

`"small"`, `"large"`

Small (32px, 40px touch) or large (52px).

`aria-busy`

`"true"`

While the action runs: it waits and ignores another tap.