Item

import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from '@hanzo/ui'

Default

Media, a title and description, and an action, in one row.

New message from Sarah

Sarah sent you a message about the design review.

export function Default() {
  return (
    <Item variant="outline">
      <ItemMedia variant="icon">
        <Badge variant="secondary">i</Badge>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>New message from Sarah</ItemTitle>
        <ItemDescription>Sarah sent you a message about the design review.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm" variant="outline">
          Reply
        </Button>
      </ItemActions>
    </Item>
  )
}

Variants

Default, outline and muted read as three levels of emphasis.

Default

Outline

Muted

export function Variants() {
  return (
    <YStack gap="$3">
      <Item variant="default">
        <ItemContent>
          <ItemTitle>Default</ItemTitle>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Outline</ItemTitle>
        </ItemContent>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Muted</ItemTitle>
        </ItemContent>
      </Item>
    </YStack>
  )
}

Group

A list of items sharing one rhythm, divided by a separator.

Invoice #1024

Paid on March 3

Paid

Invoice #1025

Due March 18

Due

export function Group() {
  return (
    <ItemGroup>
      <Item size="sm" variant="outline">
        <ItemContent>
          <ItemTitle>Invoice #1024</ItemTitle>
          <ItemDescription>Paid on March 3</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="secondary">Paid</Badge>
        </ItemActions>
      </Item>
      <ItemSeparator />
      <Item size="sm" variant="outline">
        <ItemContent>
          <ItemTitle>Invoice #1025</ItemTitle>
          <ItemDescription>Due March 18</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="outline">Due</Badge>
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

As a link

`asChild` puts the row's hover and focus styling on the anchor.

Dashboard

Overview of your account and activity.

export function AsChild() {
  return (
    <XStack maxW={420}>
      <Item asChild variant="outline">
        <a href="/dashboard">
          <ItemContent>
            <ItemTitle>Dashboard</ItemTitle>
            <ItemDescription>Overview of your account and activity.</ItemDescription>
          </ItemContent>
        </a>
      </Item>
    </XStack>
  )
}

Types

export type ItemVariant = 'default' | 'outline' | 'muted'

export type ItemSize = 'default' | 'sm'

export type ItemMediaVariant = 'default' | 'icon' | 'image'

export type ItemProps = ComponentProps<typeof ItemFrame> & {
  variant?: ItemVariant | null
  size?: ItemSize | null
  asChild?: boolean
}

export type ItemMediaProps = ComponentProps<typeof ItemMediaFrame> & {
  variant?: ItemMediaVariant | null
}

export type ItemContentProps = ComponentProps<typeof ItemContentFrame>

export type ItemTitleProps = ComponentProps<typeof ItemTitleFrame>

export type ItemDescriptionProps = ComponentProps<typeof ItemDescriptionFrame>

export type ItemActionsProps = ComponentProps<typeof ItemActionsFrame>

export type ItemHeaderProps = ComponentProps<typeof ItemHeaderFrame>

export type ItemFooterProps = ComponentProps<typeof ItemFooterFrame>

export type ItemGroupProps = ComponentProps<typeof ItemGroupFrame>

export type ItemSeparatorProps = ComponentProps<typeof Separator>

Exports

ItemItemActionsItemContentItemDescriptionItemFooterItemGroupItemHeaderItemMediaItemSeparatorItemTitletype ItemActionsPropstype ItemContentPropstype ItemDescriptionPropstype ItemFooterPropstype ItemGroupPropstype ItemHeaderPropstype ItemMediaPropstype ItemMediaVarianttype ItemPropstype ItemSeparatorPropstype ItemSizetype ItemTitlePropstype ItemVariant