# Components: Actions

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from Generated/*.razor, blazor/mappings, generated.manifest.json and core/dist/elements/api.json. Do not edit: change the source and run the generator.

Every component renders its element with the parameters you set as attributes. An attribute that is not a parameter (`id`, `class`, `data-*`, `aria-*`, ...) is put on the element as it is, and a `class` is added to the component's own (`ExtraClass` on a component that lists it). Names are `Pk` plus the tag in PascalCase.

## `PkButton`

`<pk-button>`: **Button** (Actions). A button in five variants and three sizes, with busy, icon-only, toggle and disclosure forms. type="submit" and "reset" act on the surrounding form, as a native button does. With href it renders a real link that looks like a button.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Variant` | `ButtonVariant?` | `Primary` `Ghost` `Warn` `Secondary` `Plain` | attribute `variant` | Visual weight. plain is the bare button (no border, a tinted hover): use it for an icon-only button in an app bar, a drawer header or a toolbar. ghost is the outlined quiet button and keeps its 1px border, with text or an icon alone; secondary is the accent outline. |
| `Size` | `ButtonSize?` | `Md` `Mini` `Lg` | attribute `size` | md is the reading-size control; mini is the compact desktop-density one; lg is the large one. |
| `Type` | `ButtonType?` | `Button` `Submit` `Reset` | attribute `type` | What a click does inside a form: nothing, submit it, or reset it. |
| `Href` | `string?` |  | attribute `href` | Makes the button a link: the control is an <a> that navigates natively (middle and ctrl-click, the status-bar URL). Every variant, size, icon and busy style still applies. A link ignores type, toggle and pressed. |
| `Bookmarklet` | `bool` |  | attribute `bookmarklet` | Keeps a script address (a javascript URL) as the href, for a bookmarklet a reader drags to the bookmarks bar. Without it such an href is dropped. The href is then used exactly as written: only for an address you wrote in the page, never one bound to data (a database row, a query string, a parameter). |
| `Target` | `string?` |  | attribute `target` | Where a link opens (for example _blank). Only with href. |
| `Rel` | `string?` |  | attribute `rel` | The link relation. Defaults to noopener when target is _blank. Only with href. |
| `Download` | `string?` |  | attribute `download` | Downloads the target instead of opening it, under the file name given (the bare attribute keeps the name from the URL). Only with href. |
| `Disabled` | `bool` |  | attribute `disabled` | Blocks interaction and dims the control. Also set by a disabled fieldset. A disabled link loses its href and reports aria-disabled. |
| `Busy` | `bool` |  | attribute `busy` | Shows a spinner and ignores clicks without disabling the button, so focus stays put. A busy link loses its href, reports aria-disabled and stays focusable. |
| `BusyText` | `string?` |  | attribute `busy-text` | Replaces the label while busy. |
| `AriaLabel` | `string?` |  | attribute `label` | The accessible name, for a button whose visible content is only an icon. It wins over the words in the slot; leave it off and write the name as the button text with icon set instead. |
| `Block` | `bool` |  | attribute `block` | Fills the width of its container. |
| `Overflow` | `ButtonOverflow?` | `Visible` `Wrap` `Truncate` | attribute `overflow` | What a label wider than the container does. visible (the default) keeps one line and may overflow; wrap lets it run over several lines (breaking inside a long word if it must) and the button shrink to its container; truncate keeps one line and cuts it with an ellipsis. The full text stays in the DOM, so the accessible name is unchanged; add a pk-tooltip when sighted users need the whole text. |
| `Icon` | `bool` |  | attribute `icon` | Icon-only mode: a square button that draws only its icon (icon-name, a pk-icon or an svg in the start slot). The words in the default slot are hidden visually but stay the accessible name, and show as the tooltip on hover. The label prop wins over them when both are given. |
| `Collapse` | `ButtonCollapse?` | `None` `Phone` `Tablet` | attribute `collapse` | Folds the label into the icon at and below that breakpoint (phone: icon only on a phone; tablet: icon only on a tablet and a phone; above it, icon and text). The words stay the accessible name. Needs an icon (icon-name or a start-slot icon): a button without one never collapses. |
| `IconName` | `string?` |  | attribute `icon-name` | Draws that symbol of the SDK icon sprite inside the control, before the label (the pk-icon names: plus, search, chevron-left and so on), so an icon button needs no child element. A name that is not in the sprite is reported once through the logger and nothing is drawn. |
| `Toggle` | `bool` |  | attribute `toggle` | A button that stays pressed: a click flips pressed. |
| `Pressed` | `bool` |  | attribute `pressed` | The pressed (for toggle) or expanded (for disclosure) state of the button. |
| `PressedChanged` | `EventCallback<bool>` |  | two-way pair of `Pressed` | Raised when Pressed changes (two-way binding: `@bind-Pressed`). |
| `Disclosure` | `bool` |  | attribute `disclosure` | A button that shows or hides something else: a click flips pressed, a built-in caret rotates with it, and the control reports aria-expanded instead of aria-pressed. Use it for a row or panel the button itself expands and collapses (a sub-row, a detail block); for a control that stays visually pressed without expanding anything, use toggle instead. Composes with every variant, size and icon. |
| `Haspopup` | `string?` |  | attribute `haspopup` | What the button opens, announced as aria-haspopup on the control: menu, listbox, tree, grid, dialog or true. Empty says nothing. |
| `Controls` | `string?` |  |  | The id of the element this button controls, set as aria-controls on the control (several ids separated by spaces name several elements). Resolved in the button's own tree after each render in which the id changed. |
| `OnClick` | `EventCallback<MouseEventArgs>` |  | event `click` | A click (not fired while disabled or busy). A link fires it too, so a host can track the navigation; preventDefault stops the navigation. |
| `ChildContent` | `RenderFragment?` |  | default slot | The label. With icon set it is hidden visually and kept as the accessible name; an element in it (a pk-icon) stays drawn. |
| `StartContent` | `RenderFragment?` |  | slot `start` | An icon before the label. |
| `EndContent` | `RenderFragment?` |  | slot `end` | An icon after the label. |
| `OnToggle` | `EventCallback<PkToggleEventArgs>` |  |  | A toggle or disclosure button was pressed or released. |

Two-way binding: `@bind-Pressed`.

When you set a named fragment (`StartContent`, `EndContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-toggle` | `PkToggleEventArgs` | Open: bool?, Expanded: bool?, Pressed: bool?, Value: string?, Id: string? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-button` in the `plainkit-sdk` skill.

## `PkButtonGroup`

`<pk-button-group>`: **Button group** (Actions). Buttons fused into one bar, horizontal, vertical or full width; with mode="single" its toggle buttons behave as one choice, which makes it the SDK's segmented control (a Dark/Light switch, a view or density picker).

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Orientation` | `ButtonGroupOrientation?` | `Horizontal` `Vertical` | attribute `orientation` | Direction of the bar. |
| `Fill` | `bool` |  | attribute `fill` | Fills the container width and shares it between the buttons. |
| `AriaLabel` | `string?` |  | attribute `label` | Accessible name of the group (aria-label). |
| `Mode` | `ButtonGroupMode?` | `None` `Single` `Multi` | attribute `mode` | single: the toggle buttons in the group release each other (one is always pressed); multi and none leave each toggle alone. |
| `ChildContent` | `RenderFragment?` |  | default slot | pk-button elements. |

Element details (parts, CSS custom properties, methods, accessibility): `pk-button-group` in the `plainkit-sdk` skill.

## `PkSplitButton`

`<pk-split-button>`: **Split button** (Actions). A main action beside a caret that opens a menu of related actions, so the common case is one click and the variants stay reachable.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Type` | `SplitButtonType?` | `Button` `Submit` `Reset` | attribute `type` | What the main action does inside a form. |
| `Variant` | `SplitButtonVariant?` | `Primary` `Ghost` | attribute `variant` | Colour of both halves. |
| `Disabled` | `bool` |  | attribute `disabled` | Blocks interaction; also set by a disabled fieldset. |
| `ToggleLabel` | `string?` |  | attribute `toggle-label` | Accessible name of the caret button. |
| `Open` | `bool` |  | attribute `open` | Whether the menu is open. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `MenuAlign` | `SplitButtonMenuAlign?` | `Start` `End` | attribute `menu-align` | Which edge the menu lines up with. |
| `OnClick` | `EventCallback<MouseEventArgs>` |  | event `click` | The main action was clicked. |
| `OnSelect` | `EventCallback<PkSplitSelectEventArgs>` |  | event `pk-split-select` | A menu item was chosen. |
| `ChildContent` | `RenderFragment?` |  | default slot | The main action label. |
| `MenuContent` | `RenderFragment?` |  | slot `menu` | The menu items: buttons (with a value or data-value). |
| `OnMenuToggle` | `EventCallback<PkMenuToggleEventArgs>` |  |  | The menu opened or closed. |

Two-way binding: `@bind-Open`.

When you set a named fragment (`MenuContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-menu-toggle` | `PkMenuToggleEventArgs` | Open: bool? |
| `pk-split-select` | `PkSplitSelectEventArgs` | Value: string?, Label: string? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-split-button` in the `plainkit-sdk` skill.