ButtonGroup

ButtonGroup

The ButtonGroup component groups related buttons together into a single, connected control. It can be used to present actions that belong to the same context or provide a set of closely related choices.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";
 
export default function Example() {
  return (
    <ButtonGroup>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
    </ButtonGroup>
  );
}

Examples

Colors

Use the color prop to communicate the semantic meaning of the buttons within the group.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";

export default function Example() {
  return (
    <div class="flex flex-col items-center gap-4">
      <ButtonGroup color="default">
        <Button>Default</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup color="success">
        <Button>Success</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup color="warning">
        <Button>Warning</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup color="info">
        <Button>Info</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup color="error">
        <Button>Delete</Button>
        <Button>Remove</Button>
      </ButtonGroup>
    </div>
  );
}

Sizes

Use the size prop to control the size of the button group.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";

export default function Example() {
  return (
    <div class="flex flex-col items-center gap-4">
      <ButtonGroup size="small">
        <Button>Small</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup size="medium">
        <Button>Medium</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup size="large">
        <Button>Large</Button>
        <Button>Action</Button>
      </ButtonGroup>
    </div>
  );
}

Variants

Use the variant prop to control the visual style of the button group.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";

export default function Example() {
  return (
    <div class="flex flex-col items-center gap-4">
      <ButtonGroup variant="solid">
        <Button>Solid</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup variant="filled">
        <Button>Filled</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup variant="outlined">
        <Button>Outlined</Button>
        <Button>Action</Button>
      </ButtonGroup>
      <ButtonGroup variant="ghost">
        <Button>Ghost</Button>
        <Button>Action</Button>
      </ButtonGroup>
    </div>
  );
}

Orientation

Use the orientation prop to control the direction of the button group.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";
 
export default function Example() {
  return (
    <ButtonGroup orientation="vertical">
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
    </ButtonGroup>
  );
}

Full Width

Use the fullWidth prop to make the button group span the available width of its container.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";

export default function Example() {
  return (
    <ButtonGroup fullWidth>
      <Button>Cancel</Button>
      <Button>Save</Button>
      <Button>Submit</Button>
    </ButtonGroup>
  );
}

Disabled

Use the disabled prop to disable the entire button group.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";

export default function Example() {
  return (
    <ButtonGroup disabled>
      <Button>Save</Button>
      <Button>Cancel</Button>
      <Button>Submit</Button>
    </ButtonGroup>
  );
}

Split Button

Use a ButtonGroup to create a split button when an action has a primary operation and additional related options.

import Button from "rocksolidjs/Button";
import ButtonGroup from "rocksolidjs/ButtonGroup";
import type { ComponentProps } from "solid-js";

export default function Example() {
  return (
    <ButtonGroup>
      <Button>
        Export
      </Button>
      <Button aria-label="More export options" class="px-2">
        <ChevronDown class="text-lg" />
      </Button>
    </ButtonGroup>
  );
}

const ChevronDown = (
  props: ComponentProps<"svg">,
) => (
  <svg 
    {...props}
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
  >
    <path
      d="M0 0h24v24H0z"
      fill="none"  
    />
    <path
      fill="currentColor"
      d="m12 15.41l5.71-5.7l-1.42-1.42l-4.29 4.3l-4.29-4.3l-1.42 1.42z"
    />
  </svg>
);

Accessibility

  • Give the button group an accessible name using aria-label or aria-labelledby to describe its purpose.
  • Group related actions together so their relationship is clear to users.
  • Ensure each button has an accessible name that describes its action.
  • Do not rely on color alone to communicate the meaning of an action.
  • Keep the order of buttons consistent with the expected action flow.

API

ButtonGroup

The ButtonGroup component supports custom elements, colors, sizes, variants, disabled states, full-width layouts, and custom children.

Prop Type Required Default Description
as string No "div" The HTML element used to render the button group.
children JSXElement No — The buttons or other content rendered inside the group.
class string No — Custom CSS classes applied to the button group.
color "default" | "success" | "warning" | "info" | "error" No "default" The color scheme applied to the button group.
disabled boolean No false Disables the button group and prevents interaction with its buttons.
fullWidth boolean No false Makes the button group span the full width of its container.
orientation "horizontal" | "vertical" No "horizontal" Controls the orientation of the buttons in the group.
size "small" | "medium" | "large" No "medium" Controls the size of the buttons in the group.
variant "solid" | "filled" | "outlined" | "ghost" No "solid" Controls the visual style of the button group.
  • Button — Use Button for individual actions.