ButtonGroup

RhButtonGroup combines multiple buttons using RhButton components, which are suitable for various scenarios.

Usage

Once installed, you can import the RhButtonGroup component into your React application:

copy

import {RhButtonGroup} from "@rhythm-ui/react"

Then, you can use the RhButtonGroup component in your JSX code:

copy

<RhButtonGroup>
  <RhButton variant="white">One</RhButton>
  <RhButton variant="white">Two</RhButton>
  <RhButton variant="white">Three</RhButton>
  <RhButton variant="white">Four</RhButton>
</RhButtonGroup>

Button Group Pros

Name	Type	Default	Description
className	string		className to be passed to the whole Button Group
children	React.ReactElement[]		JSX element

Variants

The RhButtonGroup provides a convenient and flexible way to group interactive elements in one place. Here are a few variations you can see:

copy

<div className="flex justify-around">
  <RhButtonGroup>
    <RhButton variant="white" icon="heroicons:chevron-left-20-solid" />
    <RhButton variant="white" icon="heroicons:chevron-right-20-solid" />
  </RhButtonGroup>

  <RhButtonGroup>
    <RhButton variant="white" iconLeft="heroicons:bookmark-solid">
      Bookmark
    </RhButton>
    <RhButton variant="white">12k</RhButton>
  </RhButtonGroup>

  <RhButtonGroup>
    <RhButton variant="white">Dropdown</RhButton>
    <RhPopover placement="bottom-end">
      <RhPopoverToggle asChild>
        <RhButton variant="white" icon="heroicons:chevron-down-20-solid" />
      </RhPopoverToggle>
      <RhPopoverMenu>
        <RhCard>
          <RhListContainer>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Dashboard" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Settings" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Earnings" />
            </RhListItem>
          </RhListContainer>
        </RhCard>
      </RhPopoverMenu>
    </RhPopover>
  </RhButtonGroup>
</div>