# Elements: Actions, further examples

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator.

The element sections in `elements-actions.md` show the first example of each element; these are the rest.

## `pk-button`

Example: Sizes, block and disabled

```html
<pk-button size="lg">Large</pk-button>
<pk-button size="mini">Edit</pk-button>
<pk-button disabled>Locked</pk-button>
<pk-button block variant="secondary">Full width</pk-button>
```

Example: Busy, icon and toggle

```html
<pk-button busy busy-text="Saving...">Save</pk-button>
<pk-button icon variant="ghost" label="Add"><svg slot="start" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></pk-button>
<pk-button toggle variant="ghost" pressed>Bold</pk-button>
```

Example: Disclosure: a caret and aria-expanded

```html
<pk-button disclosure variant="ghost" size="mini">Details</pk-button>
<pk-button disclosure variant="plain" pressed>Channels</pk-button>
```

Example: A button that opens a menu

```html
<pk-button disclosure haspopup="menu" variant="ghost">Actions</pk-button>
```

Example: Icon buttons: the text is the name

```html
<pk-button icon variant="ghost" icon-name="plus">Add item</pk-button>
<pk-button icon variant="ghost" href="#orders"><pk-icon name="chevron-left"></pk-icon>Back to Orders</pk-button>
<pk-button icon variant="secondary" icon-name="search" busy>Search</pk-button>
<pk-button icon variant="ghost" icon-name="menu" toggle pressed>Menu</pk-button>
<pk-button icon size="mini" variant="plain" icon-name="x">Close</pk-button>
<pk-tooltip text="Add item"><pk-button icon icon-name="plus">Add item</pk-button></pk-tooltip>
```

Example: A long label: wrap or truncate

```html
<div class="u-mw-24r"><pk-stack gap="sm"><pk-button overflow="wrap" variant="secondary">A fairly long record title that cannot fit on one line at phone width</pk-button>
<pk-button overflow="truncate" variant="plain"><code>SOME-LONG-IDENTIFIER-20260913-WITH-MANY-DASHES-AND-SEGMENTS</code></pk-button></pk-stack></div>
```

Example: Collapse to the icon on a small screen

```html
<pk-button collapse="phone" icon-name="plus">Add item</pk-button>
<pk-button collapse="tablet" variant="ghost" icon-name="search">Search</pk-button>
<pk-button collapse="phone">No icon, never collapses</pk-button>
```

Example: Submits a form

```html
<form>
  <input name="q" aria-label="Search" required>
  <pk-button type="submit">Search</pk-button>
</form>
```

Example: A link that looks like a button

```html
<pk-button href="/reports">Open reports</pk-button>
<pk-button href="https://example.com/help" target="_blank" rel="noopener" variant="secondary">Help</pk-button>
<pk-button href="/export.csv" download="export.csv" variant="ghost">Download</pk-button>
<pk-button href="/reports" disabled>Unavailable</pk-button>
```

## `pk-button-group`

Example: Group and single choice

```html
<pk-button-group label="View"><pk-button variant="ghost">Day</pk-button><pk-button variant="ghost">Week</pk-button><pk-button variant="ghost">Month</pk-button></pk-button-group>
<pk-button-group label="Density" mode="single"><pk-button toggle pressed variant="ghost">Compact</pk-button><pk-button toggle variant="ghost">Comfortable</pk-button></pk-button-group>
```