Density

Item

Item renders a compact row with a title, optional subtitle, and optional start and end slots. It always uses Density’s button presentation. Subtitles render one size smaller than the Item size, clamped at 2xs.

Release notesEdited 12 minutes ago
import { Button, Item, Panel } from "density-base-ui";
import { FileText, MoreHorizontal } from "lucide-react";

export default function ItemExample() {
  return (
    <Panel>
      <Item
        as="div"
        title="Release notes"
        subtitle="Edited 12 minutes ago"
        childrenStart={<FileText aria-hidden="true" size={16} />}
        childrenEnd={
          <Button
            type="button"
            aria-label="Release notes options"
            density-emphasis="ghost"
            density-size="sm"
            square
          >
            <MoreHorizontal aria-hidden="true" size={16} />
          </Button>
        }
      />
    </Panel>
  );
}

Props

Prop Attribute Values Default
title None ReactNode Required
subtitle None ReactNode None
childrenStart None ReactNode None
childrenEnd None ReactNode None
density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Fixed presentation data-dn-presentation button button

Emphasis

primaryItem emphasis
secondaryItem emphasis
outlineItem emphasis
ghostItem emphasis
import { Button, Item, Panel } from "density-base-ui";
import { CircleDot, MoreHorizontal } from "lucide-react";

const emphases = ["primary", "secondary", "outline", "ghost"] as const;

export default function ItemEmphasisExample() {
  return (
    <Panel style={styles.panel}>
      {emphases.map((emphasis) => (
        <Item
          as="div"
          key={emphasis}
          title={emphasis}
          subtitle="Item emphasis"
          density-emphasis={emphasis}
          childrenStart={<CircleDot aria-hidden="true" size={14} />}
          childrenEnd={
            <Button
              type="button"
              aria-label={`${emphasis} item options`}
              density-emphasis="ghost"
              density-size="sm"
              square
            >
              <MoreHorizontal aria-hidden="true" size={14} />
            </Button>
          }
        />
      ))}
    </Panel>
  );
}

const styles = {
  panel: {
    display: "grid",
    gap: "0.375rem",
  },
} as const;

Size

2xsItem size
xsItem size
smItem size
mdItem size
lgItem size
xlItem size
2xlItem size
3xlItem size
import { Button, Item, Panel } from "density-base-ui";
import { FileText, MoreHorizontal } from "lucide-react";

const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;

export default function ItemSizeExample() {
  return (
    <Panel style={styles.panel}>
      {sizes.map((size) => (
        <Item
          as="div"
          key={size}
          title={size}
          subtitle="Item size"
          density-size={size}
          childrenStart={<FileText aria-hidden="true" size={14} />}
          childrenEnd={
            <Button
              type="button"
              aria-label={`${size} item options`}
              density-emphasis="ghost"
              density-size="sm"
              square
            >
              <MoreHorizontal aria-hidden="true" size={14} />
            </Button>
          }
        />
      ))}
    </Panel>
  );
}

const styles = {
  panel: {
    display: "grid",
    gap: "0.375rem",
  },
} as const;