Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

ButtonGroup

Figma
Github
Storybook
Aria patternLegacy component

The ButtonGroup component renders a group of related buttons next to each other.

Importing

You can import the component via:

import { ButtonGroup } from '@customerio/pluma-components/react';

Usage

To use the component, wrap a group of Button components with the ButtonGroup:

<ButtonGroup>
	<Button>Button 1</Button>
	<Button>Button 2</Button>
	<Button>Button 3</Button>
</ButtonGroup>

Props

ButtonGroup accepts a subset of Button props, which will then be passed down to the Button components (via context):

  • variant
  • size
  • isDisabled
<ButtonGroup variant="outline">
	<Button>Outline button 1</Button>
	<Button>Outline button 2</Button>
	<Button>Outline button 3</Button>
</ButtonGroup>
<ButtonGroup size="small">
	<Button>Small button 1</Button>
	<Button>Small button 2</Button>
	<Button>Small button 3</Button>
</ButtonGroup>
<ButtonGroup isDisabled={true}>
	<Button>Disabled button 1</Button>
	<Button>Disabled button 2</Button>
	<Button>Disabled button 3</Button>
</ButtonGroup>

Spaced groups

ButtonGroup accepts a groupVariant prop, which can be set to spaced to render a group of buttons separated by a gap. This is to ensure consistent gaps between buttons throughout the UIs.

<ButtonGroup groupVariant="spaced">
	<Button variant="primary">Button 1</Button>
	<Button variant="secondary">Button 2</Button>
	<Button variant="tertiary">Button 3</Button>
	<Button variant="subtle">Button 4</Button>
</ButtonGroup>
<ButtonGroup groupVariant="spaced" isDisabled={true}>
	<Button variant="primary">Disabled button 1</Button>
	<Button variant="secondary">Disabled button 2</Button>
	<Button variant="tertiary">Disabled button 3</Button>
	<Button variant="subtle">Disabled button 4</Button>
</ButtonGroup>

API

PlumaButtonGroup extends Box

groupVariant  "segmented" | "spaced" | undefined

Default:segmented

Whether the buttons should be rendered as a connected group (segmented) or equally spaced apart (spaced).

isDisabled  boolean | undefined

Disables all buttons in the group.

size  "small" | "medium" | "sm" | "md" | undefined

Default:md

The size of the buttons. medium and small are deprecated, use md and sm instead.

unsafe_iconColor  "critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined

Change the color of the icon. By default, the icon inherits the button's text color. Use with care, as it can cause inconsistencies in the UI.

unsafe_iconSize  "fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined

Overrides the icon size used within the button. Should only be used deliberately, as it can cause inconsistencies in the UI. For example, this is used in Pagination to increase the icon size.

variant  "subtle" | "primary" | "secondary" | "tertiary" | undefined

Default:secondary

The variants of buttons to render.

On this page

Importing
Usage
Props
Spaced groups
API