Actions

AppActionIcon

An icon-only action — edit, delete, more — for the tight spots where a full labelled button is too heavy.

<app-action-icon icon="pencil" label="Edit" />

An icon-only action packs a common operation — edit, delete, view, more — into a single tappable glyph, for the dense spots where a full labelled <app-button> would crowd the layout: table rows, card corners, toolbars.

The glyph sits inside a circular action disc so the target stays a comfortable size. Its look comes entirely from the shared @webority/theme, so the Razor <app-action-icon> and the React <AppActionIcon> render identically on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the disc above it.

icon icon-variant label size tooltip-placement href danger disabled

<app-action-icon icon="pencil" label="Edit" />

href renders a link, not a buttonSet href and the disc becomes an <a> instead of a <button>. Disable it and the anchor drops its href and leaves the tab order, so a disabled link can't be followed by mouse or keyboard.

In context

Row actions live together at the end of a table row — grouped, evenly spaced, and always in the same order so the eye learns where each one is.

A row action group

View, edit, delete — the three that recur on almost every row.

Show code

<app-action-icon icon="eye" label="View" />
<app-action-icon icon="pencil" label="Edit" />
<app-action-icon icon="trash-2" label="Delete" danger="true" />

Every icon action needs an accessible labelAn icon carries no text, so screen readers have nothing to announce unless you give it one. Always name the action — “Edit”, “Delete” — so the control is announced, and let that same value double as the hover tooltip.

When to use

Use it when

A row or toolbar needs a compact action and the icon is unambiguous — edit, delete, view, more.
Space is tight and a labelled button would crowd the layout.
The action recurs on every row, so users learn the icon once.

Reach for something else when

The action is the primary thing on the screen. → AppButton
You need several actions behind one trigger. → AppDropdown
The meaning is not obvious from an icon alone. → AppButton (labelled)
It toggles a single on/off setting. → AppSwitch

Best practices

When a row has more than two or three actions, collapse the extras behind a single “more” trigger.

Don't

Five icons crammed in a row is a guessing game — too many targets to scan at a glance.

A recognisable, conventional glyph — a trash can reads as “delete” with no thinking.

Don't

An obscure glyph for a common action makes the user hover and hope. Stick to the conventional icon.

Every option

The whole surface of the component, one cell per value — states, sizes, and the button/link shapes.

state

(default)

danger

disabled

disabled danger

size — 16 / 20 (default) / 24 / 32

size="16"

size="20"

size="24"

size="32"

icon-variant — the six iconsax styles

icon-variant="linear" (default)

icon-variant="outline"

icon-variant="bold"

icon-variant="bulk"

icon-variant="broken"

icon-variant="twotone"

shape — button vs link

(default) — <button>

href="/Components/AppButton" — renders <a>

href + disabled — drops href, aria-disabled + role="link", leaves tab order

as is React-onlyRazor has no equivalent of React's as — it always renders <button> or <a> depending on whether href is set. Both are the exact markup React's AppActionIcon produces for the same props.

icon — name vs custom node

icon="trash-2" — resolved by name

custom node — React-only

No custom-node equivalentThe icon attribute only accepts a Bootstrap Icons glyph name (a string) — there's no way to pass a custom SVG node the way React's icon={<svg />} does. Register a new named glyph in the shared IconRegistry instead.

Attributes

Attribute	Type	Default	Description
icon *	`string`	—	Bootstrap Icons glyph name, rendered inside the action disc.
icon-variant	`string`	`linear`	The icon's iconsax style: `linear`, `outline`, `bold`, `bulk`, `broken` or `twotone`, the same as `<app-icon variant>`.
label	`string`	—	Accessible name — sets `aria-label` and drives a collision-aware hover/focus tooltip (Bootstrap/Popper, same engine as `<app-tooltip>`) that flips to stay on-screen.
danger	`bool`	—	Destructive tint.
disabled	`bool`	—	Disable the control.
tooltip-placement	`string`	`auto`	Which side the tooltip prefers — `auto`/`top`/`bottom`/`start`/`end`. `auto` picks the side with the most room; a named side is preferred but flips to stay in view. Collision-aware (Popper) — never clips.
href	`string`	—	Render as a link to this URL instead of a button (React `href`). A disabled link drops its href and carries `aria-disabled`.
size	`int`	`20`	Glyph size in px (React size).
as	—	—	React-only; Razor reaches the same outcome by setting href — it renders `<button>` or `<a>` based on that alone.
onClick	—	—	React-only; a Razor page wires its own click behaviour (a form post, a client script) on the rendered button/link.

The disc is the buttonIn React, AppActionIcon renders only the glyph — you wrap it in a <button className="u-action"> (add danger for a destructive treatment) and put the aria-label on that button. The Razor <app-action-icon> tag renders the whole button, label and all, for you.