Components / Item

Item

A compositional row with icon, copy, description and action.

Design systemUpdated today

example.component.html

html

<aevko-item variant="outline">
  <strong aevkoItemTitle>
    Project
  </strong>
</aevko-item>

Installation

npx aevko-ui@latest add item --yes

Source ownership

Use variants for hierarchy, then style the icon, copy and action slots independently. The row does not prescribe the action element.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

Property or slot	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'muted'`	`'default'`	Visual hierarchy of the row.
`disabled`	`boolean`	`false`	Applies disabled state styling and semantics.
`aevkoItemIcon`	`projected slot`	`empty`	Leading icon or visual.
`aevkoItemTitle / Description`	`projected slots`	`empty`	Primary and supporting copy.
`aevkoItemAction`	`projected slot`	`empty`	Trailing link, button or custom action.

Accessibility contract

Use a native link or button in the action slot and do not rely on the disabled appearance alone.

Use a native button or link for actions and expose disabled behavior semantically, not only visually.