Item Sizes for React

Use the default for primary lists where each row has a title and a description. Use sm for denser places: sidebars, menus, settings with many rows, or one-line rows like the second one here. xs goes further for very compact menus.

The image variant of ItemMedia steps down with the Item's size, to size-8 at sm and size-6 at xs. Icons and avatars keep their own size, so the example sets size-5 on the badge icon itself.

Pick a matching size yourself; Item doesn't resize what you put in ItemActions. The default row uses a sm button so it doesn't make the row taller, and the small row only has a decorative chevron.

size is a prop, not a responsive class, so pick one per list. If you need different spacing on small screens, override the padding with responsive classes on the Item, or render the list with a different size depending on the layout.

Yes. sm only reduces the gap and padding; the description keeps its size and its two-line clamp. At xs the content's gap goes away, and most styles also shrink the description text.

The text size doesn't change at sm, so readability is the same; only the padding shrinks. When the row is a link or holds a button, keep the target comfortably large to tap, and keep visible text in the row so the link has a name.