Button

Example

Import

JavaScript

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

React

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

Usage

JavaScript

<bui-button label="Receive Bitcoin"></bui-button>
<bui-button label="Send Bitcoin" style-type="outline"></bui-button>

React

<BuiButton label="Receive Bitcoin" />
<BuiButton label="Send Bitcoin" styleType="outline" />

Properties

Property	Attribute	Type	Required	Reflected	Description
content	content	string	No	No	Content type: “label”, “icon”, “label+icon”, “icon+label”
styleType	style-type	string	No	No	Button style: “filled”, “outline”, “free”
size	size	string	No	No	Button size: “default”, “small”, “large”
disabled	disabled	boolean	No	Yes	Whether the button is disabled
label	label	string	No	No	Text label for the button
cluster	cluster	string	No	No	Cluster position: “top”, “bottom”, “left”, “right”, “middle-horizontal”, “middle-vertical”
wide	wide	boolean	No	Yes	Whether the button should take full width

Valid Values

Content Types

• label - Text only
• icon - Icon only
• label+icon - Text followed by icon
• icon+label - Icon followed by text

Style Types

• filled - Solid background button
• outline - Outlined button
• free - Minimal styling

Sizes

• default - Standard size
• small - Compact size
• large - Larger size

Cluster Positions

• top - Top of a group
• bottom - Bottom of a group
• left - Left side of a group
• right - Right side of a group
• middle-horizontal - Middle of horizontal group
• middle-vertical - Middle of vertical group

Events

The component emits a standard click event when clicked (unless disabled).