Item: Actions

<ItemActions /> holds buttons at the end of the row. Keep the item itself static when it holds buttons, so there's never a button inside a link.

Mira Okafor

[email protected]

Jun Park

[email protected]

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

const invites = [
  { initials: "MO", name: "Mira Okafor", email: "[email protected]" },
  { initials: "JP", name: "Jun Park", email: "[email protected]" },
]

export function ItemActionsDemo() {
  return (
    <ItemGroup variant="grouped" className="max-w-md">
      {invites.map((invite) => (
        <Item key={invite.email} size="sm">
          <ItemMedia>
            <Avatar>
              <AvatarFallback>{invite.initials}</AvatarFallback>
            </Avatar>
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{invite.name}</ItemTitle>
            <ItemDescription>{invite.email}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="ghost" size="sm">
              Decline
            </Button>
            <Button variant="outline" size="sm">
              Accept
            </Button>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}

Add this example

This adds the example as components/examples/item/actions.tsx, together with the Item component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/item-actions.json

To add only the component, follow the Item installation.

Props in this example

The Item props this example sets, from the API reference.

Item

Prop	Type	Default
`size`	`"default" \| "sm" \| "xs"`	`"default"`

ItemGroup

Prop	Type	Default
`variant`grouped puts items on one surface with automatic separators.	`"default" \| "grouped"`	`"default"`

Every prop is in the Item API reference.

More Item examples

See them all, with keyboard support and accessibility notes, on the Item page.