# button

The markup of every demo on <https://kuiper.oeds.it/button/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## type

Varies: 4 field kinds (`button`, `image`, `reset`, `submit`).

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="image" src="/images/image-1.jpg" alt="Image 1"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="button" value="input[button]"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="submit" value="input[submit]"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="reset" value="input[reset]"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button>button</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button type="button">button[button]</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button type="submit">button[submit]</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button type="reset">button[reset]</button></div></div>
</div>
```

## .button

Varies: 4 field kinds (`button`, `image`, `reset`, `submit`).

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="image" src="/images/image-1.jpg" alt="Image 1" class="button"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="button" value="input[button]" class="button"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="submit" value="input[submit]" class="button"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><input type="reset" value="input[reset]" class="button"></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button class="button">button</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button type="button" class="button">button[button]</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button type="submit" class="button">button[submit]</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><button type="reset" class="button">button[reset]</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><a href="" class="button">anchor</a></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><span class="button">span</span></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p class="button">paragraph</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><div class="button">div</div></div></div>
</div>
```

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button">button</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rounded">rounded</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rounded button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rounded button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rounded button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rounded button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rounded button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-pill">pill</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-pill button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-pill button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-pill button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-pill button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-pill button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-circle">circle</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-circle button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-circle button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-circle button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-circle button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-circle button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rectangle">rectangle</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rectangle button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rectangle button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rectangle button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rectangle button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-rectangle button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square">square</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-rounded">square rounded</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-rounded button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-rounded button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-rounded button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-rounded button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-square button-rounded button-xl">button-xl</button></div></div>
</div>
```

## size

Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-disc">disc</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-disc button-xs">button-xs</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-disc button-s">button-s</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-disc button-m">button-m</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-disc button-l">button-l</button></div></div>
 <div class="width-auto width-auto@s width-auto@m width-auto@l width-auto@xl"><div class="card"><button class="button button-disc button-xl">button-xl</button></div></div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: `button-*` over 14 color roles.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button width-1-1">base</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-black width-1-1">black</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-muted width-1-1">muted</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-white width-1-1">white</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-primary width-1-1">primary</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-secondary width-1-1">secondary</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-tertiary width-1-1">tertiary</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-danger width-1-1">danger</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-warning width-1-1">warning</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-accent width-1-1">accent</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-success width-1-1">success</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-info width-1-1">info</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-action width-1-1">action</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-urgent width-1-1">urgent</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-emphasis width-1-1">emphasis</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-emphasis width-1-1 disabled">disabled</button></div></div>
</div>
```