Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Anatomy
  • Properties
  • Vertical
  • Layout & Spacing
  • Light & Dark Mode
  • Accessibility
  • Design System
  • API

Was this helpful?

  1. Components

Button Group

The button group component can be used to group related buttons.

PreviousButtonNextBreadcrumb

Last updated 12 months ago

Was this helpful?

A button group component is a user interface element that allows the grouping of multiple buttons or related actions in a cohesive and visually organized manner. It serves to enhance user interaction and streamline the accessibility and use of various functions within an application by presenting them as a unified set. Button groups are a versatile tool for creating clear and efficient navigation, selection, or action-taking options, improving the overall user experience.

Anatomy

The button group's anatomy consists of essential elements: a "label" for identification, a "container" for defining boundaries, and optional "suffix" and "prefix icons" for added context. This organized layout streamlines user interaction and enhances the group's usability in your application.

Properties

Button group component properties enable customization of appearance and behavior. They include options for layout, styling, spacing, button variants, and selection behavior. These properties allow tailored design and interaction, ensuring a user-friendly experience in your application.

Vertical

import React from 'react';
import { PlusButtonGroup, PlusButton } from '@plusui/react';

const ButtonGroupExample = () => (
  <PlusButtonGroup>
    <PlusButton>Button 1</PlusButton>
    <PlusButton>Button 2</PlusButton>
    <PlusButton>Button 3</PlusButton>
  </PlusButtonGroup>
);

export default ButtonGroupExample;
<plus-button-group>
  <plus-button>Button 1</plus-button>
  <plus-button>Button 2</plus-button>
  <plus-button>Button 3</plus-button>
</plus-button-group>
<template>
  <plus-button-group>
    <plus-button>Button 1</plus-button>
    <plus-button>Button 2</plus-button>
    <plus-button>Button 3</plus-button>
  </plus-button-group>
</template>
<plus-button-group>
  <plus-button>Button 1</plus-button>
  <plus-button>Button 2</plus-button>
  <plus-button>Button 3</plus-button>
</plus-button-group>

Layout & Spacing

Achieve precision in design with our Button Group Component's flexible layout and spacing options. Define the arrangement and spacing between buttons to create a visually balanced and cohesive presentation. Whether integrated into navigation bars or content sections, the layout adapts seamlessly to diverse design structures.

Light & Dark Mode

Effortlessly adapt to user preferences with our Button Group Component's built-in support for both light and dark modes. Enhance visibility and aesthetics by seamlessly transitioning between these modes, ensuring a consistent and visually pleasing experience across different environmental settings.

Accessibility

Engineered with industry-leading standards, it ensures a user-friendly experience for all individuals, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options make our Button Group Component accessible and intuitive for a diverse user base.

Criteria
Description
Status

Discernible text

Ensures buttons have discernible text

✔️ Passed

Tabindex

Ensures tabindex attribute values are not greater than 0

✔️ Passed

ID Attributes

Ensures every id attribute value is unique

✔️ Passed

Nested Interactive Controls

Ensures interactive controls are not nested as they are not always announced by screen 
readers or can cause focus problems for assistive technologies

✔️ Passed

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA 
contrast ratio thresholds

✔️ AA ~ AAA

Design System

API

Props

Slots

Name
Description

default

Button group content

The Button Group component comprises items derived from Plus UI's Each item inherits the properties of the button component. For more details on the properties specific to button components, please refer to the . To customize the Button Group component, you can tailor the properties of its underlying button components.

button component.
button documentation
Plus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma
anatomy of button group component
layout & spacing of button group component
light and dark mode of button group component
Logo