ButtonGroup

Bidirectionality

ButtonGroups support right-to-left (RTL) languages. Buttons within ButtonGroup behave like Button (Icons are reversed when the direction theme variable is set to rtl. A subset of Icons that convey directionality will be reversed).

<div dir="rtl">
  <ThemeProvider theme={{ direction: 'rtl' }}>
    <ButtonGroup aria-label="Format text" mode="checkbox">
      <Button iconEnd={<IconFormatBold />}>بالخط العريض</Button>
      <Button iconEnd={<IconFormatItalic />}>مائل</Button>
      <Button iconEnd={<IconFormatUnderlined />}>أكد</Button>
    </ButtonGroup>
  </ThemeProvider>
</div>