Button Group

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

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.

anatomy of button group component

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.

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

Vertical

React

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;

Angular

<plus-button-group>
  <plus-button>Button 1</plus-button>
  <plus-button>Button 2</plus-button>
  <plus-button>Button 3</plus-button>
</plus-button-group>

Vue

<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>

Javascript

<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.

layout & spacing of button group component

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.

light and dark mode of button group component

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

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Props

Slots

Name	Description
default	Button group content