Action Bar

ActionBarLabel is a compact labelled button for contextual page or panel actions, with optional leading/trailing icons. It carries default, hover, disabled, and selected states. Group several with ActionBarGroup.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { ActionBarLabel } from '@infinitibit_gmbh/ui';

export function Example() {
  return <ActionBarLabel label="Edit" leadingIcon={<EditIcon />} onClick={edit} />;
}

States

Default, hover (blue), disabled (muted), and selected (blue text on a soft info background). Icons inherit the state colour.

Group

ActionBarGroup wraps 2–6 ActionBarLabels in a bordered container with consistent spacing — exposed as an accessible role="group" (pass aria-label to name it).

import { ActionBarGroup, ActionBarLabel } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <ActionBarGroup aria-label="Document actions">
      <ActionBarLabel label="Edit" selected />
      <ActionBarLabel label="Share" />
      <ActionBarLabel label="Delete" />
    </ActionBarGroup>
  );
}

API

ActionBarLabel

Prop	Type	Default	Description
label	string	—	Visible button text (required)
leadingIcon	ReactNode	—	Icon before the label
trailingIcon	ReactNode	—	Icon after the label
selected	boolean	—	Active state (aria-pressed + info bg)
disabled	boolean	—	Non-interactive
onClick	() => void	—	Activation handler

All other <button> props are forwarded.

ActionBarGroup

Prop	Type	Default	Description
children	ReactNode	—	2–6 ActionBarLabels

Renders role="group"; pass aria-label to name it. All other <div> props are forwarded.

Accessibility

• Renders a native <button type="button"> — keyboard-accessible by default.
• selected sets aria-pressed="true". Disabled buttons receive the disabled attribute.
• The focus ring uses :focus-visible.