Action Button

Action component

<loquix-action-button> is the base icon button used inside message toolbars. It renders whatever you slot into it and dispatches an event whose name you set through the action property, so a single element covers regenerate, share, bookmark, or any other per-message command.

loquix-action-buttonslot-driven iconconfigurable event name

Preview

Toolbar actions Live component

Usage

import '@loquix/core/define/define-action-button';

<loquix-action-button action="loquix-regenerate" label="Regenerate response">
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
    <polyline points="23 4 23 10 17 10"></polyline>
    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
  </svg>
</loquix-action-button>

The button dispatches the event named by action, so listen for that name rather than a fixed one.

const button = document.querySelector('loquix-action-button');

button.addEventListener('loquix-regenerate', () => {
  regenerate(currentMessageId);
});

Properties

Property	Attribute	Type	Default	Description
action	action	string	''	Name of the custom event dispatched on click.
label	label	string	''	Accessible label applied to the inner button.
disabled	disabled	boolean	false	Disables the button and blocks the event.

Events

Event	Detail	Description
value of action	CustomEvent	Fired on click. The event name equals the action property, so action="loquix-share" dispatches loquix-share.

Set an action name

With an empty action, the click produces no event. Always provide both action and label — the label is the button’s only accessible name, since the icon is slotted content.

Content slot

The default slot holds the icon. Nothing is rendered without it, so this component always needs slotted content — unlike Action Copy and Action Feedback, which ship their own icons.

<loquix-action-button action="loquix-pin" label="Pin message">
  <svg viewBox="0 0 24 24" width="16" height="16"><!-- any icon --></svg>
</loquix-action-button>

CSS parts

Part	Purpose
button	The <button> element.

CSS custom properties

Variable	Purpose
--loquix-action-size	Width and height of the button.
--loquix-action-bg	Default background.
--loquix-action-hover-bg	Hover background.
--loquix-action-color	Default icon color.
--loquix-action-hover-color	Hover icon color.

These variables are shared by every action component, so setting them once on a common ancestor themes the whole toolbar.