Item as Link for React

A link when the row navigates: to a page, a route or an external resource. A button when it does something in place, such as opening a dialog or saving. If a row needs both, keep it a plain Item with a link in the title and a Button in ItemActions, since a button can't sit inside a link.

Pass the anchor to render, such as render={<a href="/docs" />}: the Item's props are merged onto it.

Either way you get one real anchor, so right-click, middle-click and the browser's link handling keep working. Use your router's link component in place of the anchor for internal routes.

target="_blank" opens a new tab, and noopener stops that page from reaching back to yours through window.opener. noreferrer also leaves out the Referer header. Modern browsers imply noopener for new tabs, but setting both is still the safe default.

A chevron in ItemActions reads as go to the next page, and the external-link icon as leaves the site. Both are decorative here, marked aria-hidden="true", because the title says where the link goes. If the new tab matters, say so in text, as the second row's description does.

Yes when it helps people decide whether to follow it: the first row says what the docs cover, the second warns that it opens a new tab. The description is clamped to two lines. Skip it when the title is the whole story.

Yes: the row is a real anchor, so Tab reaches it, Enter follows it and it's announced as a link named by its text. Item adds a visible focus ring with focus-visible styles. Avoid putting other interactive elements inside the anchor, since nested controls inside a link are invalid.