Item

A versatile list item component for displaying content with icons, avatars, and actions.

Basic

Basic Item

A simple item with title and description.

With Icon

Add an icon using the :leading slot with the item-icon-box class.

With Icon

Security Alert

New login detected from unknown device.

    <.item>
  <:leading>
    <div class="item-icon-box">
      <.icon name="lucide-shield-alert" class="size-6" />
    </div>
  </:leading>
  <:title>Security Alert</:title>
  <:description>New login detected from unknown device.</:description>
  <:trailing>
    <.button variant="outline" size="sm">Review</.button>
  </:trailing>
</.item>
  

With Avatar

Use any image or avatar component in the leading slot.

With Avatar

John Doe

Last seen 5 minutes ago

    <.item>
  <:leading>
    <.avatar src="https://..." fallback="JD" size="md" />
  </:leading>
  <:title>John Doe</:title>
  <:description>Last seen 5 minutes ago</:description>
  <:trailing>
    <.button variant="ghost" size="icon">
      <.icon name="lucide-plus" class="size-4" />
    </.button>
  </:trailing>
</.item>
  

Variants

Choose from default, outline, or muted variants.

Variants

Default Variant

Transparent border, minimal styling.

Outline Variant

Visible border for separation.

Muted Variant

Subtle background for grouping.

    <.item variant="default">
  <:title>Default Variant</:title>
</.item>

<.item variant="outline">
  <:title>Outline Variant</:title>
</.item>

<.item variant="muted">
  <:title>Muted Variant</:title>
</.item>
  

As Link

Use as="a" to render as an anchor tag with href.

As Link

Your profile has been verified.

    <.item as="a" href="/profile" variant="outline">
  <:leading>
    <div class="item-icon-inline">
      <.icon name="lucide-badge-check" class="size-5" />
    </div>
  </:leading>
  <:title>Your profile has been verified.</:title>
  <:trailing>
    <.icon name="lucide-chevron-right" class="size-4" />
  </:trailing>
</.item>
  

As Button

Use as="button" for clickable items with event handlers.

As Button

    <.item as="button" variant="outline" phx-click="item_clicked">
  <:leading>
    <div class="item-icon-box">
      <.icon name="lucide-pencil" class="size-5" />
    </div>
  </:leading>
  <:title>Edit Settings</:title>
  <:description>Click to modify your preferences.</:description>
</.item>
  