Basic Item for React

Use an Item for a compact row (media, title, description, actions) that repeats in a list. Use a Card when the block is a subject of its own with a header, body and footer. A plain div is fine for a one-off layout, but you lose the shared spacing and slots.

variant takes default, outline or muted. default has a transparent border, outline draws a border, and muted fills the row with a light muted background. The example also adds bg-background so the outlined row is opaque on a tinted page.

Controls that act on the row: a button, an icon button, a menu trigger, or a chevron or badge that hints at what happens. ItemActions lays its children out in a row with a small gap, and ItemContent grows to push it to the inline end. Keep the main text in ItemContent so the actions stay small.

No. Leave it out when the title says enough. When you include it, keep it short: ItemDescription is clamped to two lines and ItemTitle to one.

Make the whole row a link when the title and description are one destination. Keep a separate button, as here, when the action does something else. A button inside a row that is itself a link is invalid.

Item is a div, so the title and description are read as text in order and the button is announced with its label. Give the button a label that makes sense out of context, or an aria-label that names the row, when several rows share the same button text. For a list of rows, wrap them in ItemGroup, which has the list role.