Skip to contentAsheeUIAsheeUI

ActionGroup

One row of actions for a section heading, with one action stated as primary.

Umbrella

The portable contract both renderers implement.

Shared

Install

npm install asheeui @asheeui/web

Import

import { ActionGroup } from "asheeui/section-kit";

The section kit's action row; both renderers publish it on their section-kit subpath

One contract and a real implementation on both platforms.

The umbrella is the intersection; see the portable surface for the complete list and the monorepo guide for wiring one shared kit to both applications.

The live examples below run the web branch in this browser. The umbrella is the contract both branches implement; open Web for the browser's extra APIs and Native for the device's behaviour.

ActionGroup is the section kit's action row: the primary action first, an optional secondary action beside it, and the alignment the heading asks for. It is composition vocabulary rather than a control — the actions are the same Button the page would otherwise place by hand, which is what keeps the heading and the actions on one baseline.

import { ActionGroup, SectionHeading } from "asheeui/section-kit";

<SectionHeading
  eyebrow="Library"
  title="Workouts"
  description="Six sessions across strength, cardio and mobility."
  actions={
    <ActionGroup
      primaryAction={{ label: "Add to plan" }}
      secondaryAction={{ label: "Browse all", variant: "ghost" }}
    />
  }
/>;

The section kit subpath

Both renderers publish ActionGroup on their section-kit subpath, and the umbrella re-exports the subpath as asheeui/section-kit. It is separate from the component root because it is composition vocabulary: a kit that composes a page needs it, a single control does not.

import { ActionGroup, SectionHeading } from "asheeui/section-kit";

SkipLink is the one section-kit name that stays web-only, because a skip link compensates for the browser's tab order.

Props