CardItem

TxCardItem is a compact row primitive for settings, command lists, and lightweight navigation. It renders optional avatar content, primary text, supporting copy, and right-side controls while keeping click handling explicit through clickable.

import { ref } from 'vue' const enabled = ref(true)

Basic Usage

CardItem

Demo will load when visible.

<template>
  <TxCardItem title="Enable feature" description="Right area supports actions" icon-class="i-carbon-settings">
    <template #right>
      <TxSwitch v-model="enabled" />
      <i class="i-carbon-chevron-right" />
    </template>
  </TxCardItem>
</template>

API

Props

Prop	Type	Default	Description
`role`	`string`	`'button'`	ARIA role applied to the root element.
`title`	`string`	`''`	Primary single-line label when the `title` slot is not used.
`subtitle`	`string`	`''`	Secondary single-line label rendered below the title.
`description`	`string`	`''`	Supporting copy rendered below the top row.
`iconClass`	`string`	`''`	Icon class rendered in the avatar area when no avatar URL is provided.
`avatarText`	`string`	`''`	Text fallback rendered in the avatar area.
`avatarUrl`	`string`	`''`	Image URL rendered before icon or text avatar fallbacks.
`avatarSize`	`number`	`36`	Avatar size in pixels.
`avatarShape`	`'circle' \| 'rounded'`	`'circle'`	Avatar corner style.
`clickable`	`boolean`	`false`	Enables pointer cursor, focusability, and click / Enter emits.
`active`	`boolean`	`false`	Applies the selected visual state.
`disabled`	`boolean`	`false`	Disables focus and click / keyboard emits.

Slots

Name	Description
`avatar`	Replaces the generated avatar area.
`title`	Replaces the primary title content.
`subtitle`	Replaces the subtitle content.
`description`	Replaces the supporting description content.
`right`	Renders actions or trailing metadata on the right side of the top row.

Events

Event	Params	Description
`click`	`MouseEvent`	Emitted from mouse click or Enter when `clickable=true` and not disabled.