ankow
OverviewBreadCrumbButtonButtonGroupClipboardDialogDirectoryViewFileUploaderFormTextInputPasswordInputEmailInputNumberInputDateTimeInputTagInputCheckBoxRadioButtonSwitchFormGroupInputGroupIconLayoutMainLayoutTopBarBottomBarListItemMenuMultiSelectNotificationOfflineBannerPopoverProgressBarSaveIndicatorSectionItemSettingsItemSingleSelectSplitLayoutSpinnerTabViewTableViewTooltipTextOverflowTreeViewListItem
A list item for displaying a label with optional subtext, left slot for custom content (e.g. an icon), and either a right chevron (link mode via href) or an inline action bar with quick actions and overflow menu (via actions).
Link Mode
When href is set, the entire row becomes a clickable link with a right chevron indicator.
Left Slot
Pass custom content into the left slot for an icon or any custom element on the left side.
Label Slot
Use the label slot for custom primary content (e.g. a title with muted metadata). When provided, it overrides the label prop.
Subtext Slot
Use the subtext slot for custom or multi-line secondary content. When provided, it overrides the subtext prop.
Action Mode
When actions is set, an action bar appears on the right side. Up to 2 visible actions are shown as quick action buttons. When more than 2 actions exist, only those marked with quickAction: true appear inline; the rest go into the ellipsis overflow menu. On desktop, quick actions are revealed on row hover.
Basic actions (with quickAction flags)
Many actions (overflow menu)
Single action
Actions with href
Usage
Action definition
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | - | Main label text (ignored when the label slot is used) |
| subtext | String | - | Optional subtext below the label (ignored when the subtext slot is used) |
| href | String | - | When set, renders as an <a> tag with a right chevron |
| actions | Array | [] | Action items for the inline action bar (mutually exclusive with href) |
Action Item Properties
| Property | Type | Description |
|---|---|---|
| label | String | Item label (shown in tooltip and overflow menu) |
| icon | String | FontAwesome icon class for the button |
| action | Function | Click handler |
| href | String | Render as a link instead of a button |
| target | String | Link target (e.g. _blank) |
| quickAction | Boolean | Show this action in the quick actions bar. When <=2 visible actions exist, all are shown as quick actions regardless of this flag. |
| visible | Boolean | Show or hide this action (default true) |
| separator | Boolean | Render as a separator in the overflow menu |
| disabled | Boolean | Disable the action in the overflow menu |
| checkbox | Boolean | Render as a checkbox item in the overflow menu |
| checked | Boolean | CheckBox checked state |
| type | Component | Custom Vue component for the menu item |
Slots
| Slot | Description |
|---|---|
| left | Custom content for the left side (e.g. an icon or a div) |
| label | Custom primary content. Overrides the label prop when used. |
| subtext | Custom secondary content below the label. Overrides the subtext prop when used. |