Skip to content
Aihio v2.3.0
Search
GitHub
Search Describe what you are building, or name a component, intent, or token. Components and patterns are ranked the way the MCP server's find tool ranks them for an agent.

<aihio-cluster> v1.0.0 Markdown for agents

Cluster

Horizontal layout primitive for grouped inline items such as button rows, badge lists, and toolbars. Wraps when space runs out.

Intents layout container

Variants

Every value of the attributes that change how it looks. The values come from the schema.

gap

Spacing between items, from the spacing tokens.

gap="tight"
gap="sm"
gap="md"
gap="lg"

Examples

Each one rendered live, over the markup that produces it.

Form actions at the end of a row

Reset Save 
<form>
  <aihio-cluster justify="end">
    <aihio-button variant="outline" type="reset">Reset</aihio-button>
    <aihio-button type="submit">Save</aihio-button>
  </aihio-cluster>
</form>

Badges, tightly spaced

Draft Internal 
<aihio-cluster gap="tight">
  <aihio-badge>Draft</aihio-badge>
  <aihio-badge variant="secondary">Internal</aihio-badge>
</aihio-cluster>

In a card footer

A cluster in a footer has to grow to fill the row before justify has room to act.

Reset Save 
<aihio-card>
  <form>
    <aihio-card-content>
      <aihio-field>
        <label slot="label">Project name</label>
        <aihio-input name="project" value="Aihio"></aihio-input>
      </aihio-field>
    </aihio-card-content>
    <aihio-card-footer>
      <aihio-cluster grow justify="end">
        <aihio-button variant="outline" type="reset">Reset</aihio-button>
        <aihio-button type="submit">Save</aihio-button>
      </aihio-cluster>
    </aihio-card-footer>
  </form>
</aihio-card>

Mistakes

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

justify="space-between" is not valid.

Use justify="between".

Don't

<aihio-cluster justify="space-between"><aihio-button>Save</aihio-button></aihio-cluster>

aihio lint reports

  • invalid-enum-attribute error invalid justify="space-between". Use justify="between". Expected one of: start, center, end, between. Suggests justify="between"

Do

Save 
<aihio-cluster justify="between"><aihio-button>Save</aihio-button></aihio-cluster>

A row of actions belongs in aihio-cluster. aihio-stack stacks them vertically and stretches them to full width.

Don't

<aihio-stack><aihio-button>Cancel</aihio-button><aihio-button>Save</aihio-button></aihio-stack>

aihio lint passes this: it is a judgment the linter cannot make.

Do

CancelSave 
<aihio-cluster><aihio-button>Cancel</aihio-button><aihio-button>Save</aihio-button></aihio-cluster>

justify="end" does nothing here: the cluster is a content-sized flex item inside the footer.

Add grow so it fills the row.

Don't

<aihio-card-footer>
  <aihio-cluster justify="end">
    <aihio-button>Save</aihio-button>
  </aihio-cluster>
</aihio-card-footer>

aihio lint reports

  • cluster-needs-grow warn justify="end" does nothing here: inside <aihio-card-footer> the cluster is sized to its content. Add grow so it fills the row. Suggests grow justify="end"

Do

Save 
<aihio-card-footer>
  <aihio-cluster grow justify="end">
    <aihio-button>Save</aihio-button>
  </aihio-cluster>
</aihio-card-footer>

API

Every attribute, property, method, and event the schema declares for aihio-cluster.

Attributes

gap
one of tightsmmdlg default sm
Spacing between items, from the spacing tokens.
align
one of startcenterendbaseline default center
Cross-axis alignment of items.
justify
one of startcenterendbetween default start
Main-axis distribution of items.
grow
boolean default false
Makes the cluster fill its row. Needed for justify to have any effect inside a flex parent such as a card or dialog footer, where the cluster is otherwise sized to its content.

Slots

default
Inline items to group, typically buttons, badges, or avatars.

Composition

Allowed children
anything

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your obligations

  • warn When the cluster is a toolbar of related controls

    Add role="toolbar" and an aria-label on the cluster; it is presentational by default.

    Not machine-checkable: a judgment for the author.

Handled for you

  • Purely presentational: adds no role and no tab stop, so grouped controls keep their own semantics and focus order.
  • Items wrap rather than overflow, so grouped actions stay reachable at narrow widths.

In patterns

Canonical compositions that use aihio-cluster.