LabelGroup

<LabelGroup>
  <Label>One</Label>
  <Label>Two</Label>
  <Label>Three</Label>
  <Label>Four</Label>
  <Label>Five</Label>
  <Label>Six</Label>
  <Label>Seven</Label>
  <Label>Eight</Label>
  <Label>Nine</Label>
  <Label>Ten</Label>
  <Label>Eleven</Label>
  <Label>Twelve</Label>
  <Label>Thirteen</Label>
  <Label>Fourteen</Label>
  <Label>Fifteen</Label>
  <Label>Sixteen</Label>
</LabelGroup>

<>
  <p>Trunacte after 5 labels</p>
  <LabelGroup visibleChildCount={5}>
    <Label>One</Label>
    <Label>Two</Label>
    <Label>Three</Label>
    <Label>Four</Label>
    <Label>Five</Label>
    <Label>Six</Label>
    <Label>Seven</Label>
    <Label>Eight</Label>
    <Label>Nine</Label>
    <Label>Ten</Label>
    <Label>Eleven</Label>
    <Label>Twelve</Label>
    <Label>Thirteen</Label>
    <Label>Fourteen</Label>
    <Label>Fifteen</Label>
    <Label>Sixteen</Label>
  </LabelGroup>
  <p>Trunacte labels based on container size</p>
  {/* The `Box` wrapper is just to demonstrate the behavior of `visibleChildCount="auto"` */}
  <Box
    sx={{
      outline: '1px solid black',
      overflow: 'auto',
      padding: '0.25rem',
      resize: 'horizontal',
      width: '600px',
    }}
  >
    <LabelGroup visibleChildCount="auto">
      <Label>One</Label>
      <Label>Two</Label>
      <Label>Three</Label>
      <Label>Four</Label>
      <Label>Five</Label>
      <Label>Six</Label>
      <Label>Seven</Label>
      <Label>Eight</Label>
      <Label>Nine</Label>
      <Label>Ten</Label>
      <Label>Eleven</Label>
      <Label>Twelve</Label>
      <Label>Thirteen</Label>
      <Label>Fourteen</Label>
      <Label>Fifteen</Label>
      <Label>Sixteen</Label>
    </LabelGroup>
  </Box>
</>