Nayan UI - Button Group

A Button Group component is a UI element that groups multiple buttons together, allowing users to select from a set of related actions or options. It helps organize buttons in a compact, cohesive layout, typically displayed in a horizontal or vertical row. Button Groups are useful for actions that are closely related or mutually exclusive, providing a clean and structured way to present multiple controls.

# Demo

Basic Button Group

Simple button group with string items and selection state.

Choose your plan:

Selected: Business

Different Sizes

Button groups with different button sizes using custom styling.

Small buttons:

Large buttons:

Custom Styling

Button groups with custom colors and styling.

View mode:

Priority level:

Number-based Selection

Button group with numeric values for ratings or quantities.

Rate this item:

Rating: 3/5 stars

Disabled State

Button group in disabled state.

Filter options (disabled):

This button group is disabled and cannot be interacted with.

Vertical Layout

Button group arranged vertically using custom styling.

Navigation menu:

Compact Style

Minimal spacing and compact design for tight layouts.

Text formatting:

Zoom level:

Interactive Examples

Button groups with real-world interactions and feedback.

Theme Selector

Language Selector

Accessibility

Button group with proper ARIA labels and keyboard navigation.

Sort order (use arrow keys to navigate):

This button group supports keyboard navigation with arrow keys and has proper ARIA labeling.

# Usage

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
buttonClassName	string	' '	You can customise by passing tailwind classes.
items	T[]	Required	You can pass items for the button group.
selected	T	Required	You can pass default selected item.
disabled	boolean	false	You can pass disable state to disable items.
onChange	(selected: T) => void	Required	You can get callback when button group changed.
keyExtractor	(item: T, idx: number) => string \| number	Optional	Custom key extractor function.
renderButton	(item: T, selected: boolean, idx: number) => React.ReactNode	Optional	Custom render function for buttons.
ariaLabel	string	Optional	ARIA label for accessibility.

# Tags