Navigation
Inputs & Forms
Selection
Containers & Overlays
Button Group
Starts an action, in different colors, styles and sizes, with optional icons.
Overview
ButtonGroup lays out related buttons with consistent spacing. The buttons stay independent: each starts its own action.
"use client";import {Button, ButtonGroup} from "@brynlabs/fusion-ui";import React from "react";export const ButtonGroupExample = () => (<ButtonGroup><Button color={"primary"}>Button 1</Button><Button color={"primary"}>Button 2</Button></ButtonGroup>);
Directions
Row:
Column:
"use client";import {Button, ButtonGroup} from "@brynlabs/fusion-ui";import React from "react";export const ButtonGroupDirectionExample = () => (<div style={{display: "flex", flexDirection: "column", gap: "20px"}}><div style={{display: "flex", flexDirection: "column", gap: "10px"}}><p>Row:</p><ButtonGroup direction={"row"}><Button color={"primary"}>Button 1</Button><Button color={"primary"}>Button 2</Button></ButtonGroup></div><div style={{display: "flex", flexDirection: "column", width: "fit-content", gap: "10px"}}><p>Column:</p><ButtonGroup direction={"column"}><Button color={"primary"}>Button 1</Button><Button color={"primary"}>Button 2</Button></ButtonGroup></div></div>);
Different button styles
Combine a flat main action with less emphasized secondary actions.
"use client";import {Button, ButtonGroup} from "@brynlabs/fusion-ui";import React from "react";export const ButtonGroupTypesExample = () => (<div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}><ButtonGroup><Button buttonStyle={"ghost"} color={"primary"}>Button 1</Button><Button buttonStyle={"ghost"} color={"primary"}>Button 2</Button></ButtonGroup><br /><ButtonGroup><Button buttonStyle={"flat"} color={"primary"}>Button 1</Button><Button buttonStyle={"ghost"} color={"primary"}>Button 2</Button><Button buttonStyle={"ghost"} color={"primary"}>Button 2</Button></ButtonGroup><ButtonGroup><Button size={"small"} buttonStyle={"flat"} color={"primary"}>Button 1</Button><Button size={"small"} buttonStyle={"ghost"} color={"primary"}>Button 2</Button><Button size={"small"} buttonStyle={"ghost"} color={"primary"}>Button 2</Button></ButtonGroup><br /><ButtonGroup direction={"column"}><Button buttonStyle={"flat"} color={"primary"}>Button 1</Button><Button buttonStyle={"elevated"} color={"primary"}>Button 2</Button><Button buttonStyle={"ghost"} color={"primary"}>Button 2</Button></ButtonGroup></div>);