# button-link

The markup of every demo on <https://kuiper.oeds.it/button-link/>, 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-`.

## .button-link

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 button-link"></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 button-link"></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 button-link"></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 button-link"></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-link">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-link">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-link">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-link">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 button-link">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 button-link">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 button-link">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 button-link">div</div></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 13 color roles.

```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 button-link">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-link button-black">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-link button-muted">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-link button-primary">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-link button-secondary">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-link button-tertiary">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-link button-danger">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-link button-warning">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-link button-accent">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-link button-success">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-link button-info">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-link button-action">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-link button-urgent">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-link button-emphasis">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-link button-emphasis disabled">disabled</button></div></div>
</div>
```

## color

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

```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 button-link">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-link button-muted">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-link button-white">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-link button-primary">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-link button-secondary">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-link button-tertiary">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-link button-danger">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-link button-warning">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-link button-accent">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-link button-success">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-link button-info">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-link button-action">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-link button-urgent">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-link button-emphasis">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-link button-emphasis disabled">disabled</button></div></div>
</div>
```