Button Cluster

Example

Import

JavaScript

import '@sbddesign/bui-ui/button.js'
import '@sbddesign/bui-ui/button-cluster.js'

React

import { BuiButtonReact as BuiButton, BuiButtonClusterReact as BuiButtonCluster } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<bui-button-cluster direction="horizontal">
    <bui-button style-type="outline" label="Back" cluster="left"></bui-button>
    <bui-button style-type="outline" label="Save" cluster="middle-horizontal"></bui-button>
    <bui-button style-type="outline" label="Next" cluster="right"></bui-button>
</bui-button-cluster>

React

<BuiButtonCluster direction="horizontal">
    <BuiButton styleType="outline" label="Back" cluster="left"></BuiButton>
    <BuiButton styleType="outline" label="Save" cluster="middle-horizontal"></BuiButton>
    <BuiButton styleType="outline" label="Next" cluster="right"></BuiButton>
</BuiButtonCluster>

Properties

The direction property is neither required nor reflected.

Property	Attribute	Type	Description
direction	direction	string	No

Valid Values

Directions

• horizontal - Buttons arranged in a row
• vertical - Buttons arranged in a column

Behavior

• Layout Management: The button cluster automatically manages the layout of child buttons
• Spacing: Provides consistent spacing between buttons in the cluster
• Direction Control: The direction property controls whether buttons are arranged horizontally or vertically

Events

The button cluster component does not emit custom events. It acts as a container for buttons and manages their layout and spacing.