<DemoLayout>
  <ButtonGroup aria-label="Align text" mode="radio">
    <Button defaultChecked iconStart={<IconFormatAlignLeft />}>Left</Button>
    <Button iconStart={<IconFormatAlignCenter />}>Center</Button>
    <Button iconStart={<IconFormatAlignRight />}>Right</Button>
  </ButtonGroup>

  <ButtonGroup aria-label="Format text" mode="checkbox">
    <Button iconEnd={<IconFormatBold />} aria-label="Bold" />
    <Button iconEnd={<IconFormatItalic />} aria-label="Italic" />
    <Button iconEnd={<IconFormatUnderlined />} aria-label="Underlined" />
  </ButtonGroup>

  <ButtonGroup aria-label="Sentiments" mode="radio">
    <Button
      variant="success"
      iconEnd={<IconSentimentSatisfied />}
      aria-label="Satisfied" />
    <Button
      variant="warning"
      iconEnd={<IconSentimentNeutral />}
      aria-label="Neutral" />
    <Button
      variant="danger"
      iconEnd={<IconSentimentDissatisfied />}
      aria-label="Unsatisfied" />
  </ButtonGroup>
</DemoLayout>