Item with Media and Icon for React

When a picture or icon tells people what kind of row it is before they read it, as this badge does for a verified profile. Leave it out when the title is the whole story.

The Item renders as an anchor, so the entire row is one link with a hover background and a focus ring. Pass the anchor to render.

A trailing chevron is the usual hint that the row opens another page. It's decorative, marked aria-hidden="true", because the link itself already says it's a link. Use an external-link icon instead when the row leaves your site.

It reduces the Item's gap and padding, which suits a one-line row without a description. The text size stays the same. The icon keeps its own size-5, since ItemMedia's default variant doesn't size icons.

variant="outline" draws the border, and className="bg-background" fills the row so that border reads on a tinted surface. The link is size="sm".

Yes: the row is one anchor named by its title, both icons are hidden from screen readers, and the link takes focus with Tab and opens with Enter. Keep the title meaningful on its own, since it's all a screen reader announces.