Fusion UI

Overview

A SplitButton combines several buttons visually into one. Its look and size follow the buttons inside it.

"use client";

import {Button, IconAdd, SplitButton} from "@brynlabs/fusion-ui";
import React from "react";

export const SplitButtonExample = () => (
  <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
    <SplitButton>
      <Button color={"primary"}>Food</Button>
      <Button primaryIcon={<IconAdd></IconAdd>}></Button>
    </SplitButton>
  </div>
);

Sizes

extraSmall:

small:

regular:

large:

"use client";

import {Button, BUTTON_SIZES, IconAdd, SplitButton} from "@brynlabs/fusion-ui";
import React from "react";

export const SplitButtonSizesExample = () => (
  <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
    {BUTTON_SIZES[0]}:
    <SplitButton>
      <Button size={"extraSmall"} color={"primary"}>
        Food
      </Button>
      <Button size={"extraSmall"} primaryIcon={<IconAdd></IconAdd>}></Button>
    </SplitButton>
    {BUTTON_SIZES[1]}:
    <SplitButton>
      <Button size={"small"} primaryIcon={<IconAdd></IconAdd>}></Button>
      <Button size={"small"} color={"primary"}>
        Food
      </Button>
      <Button size={"small"} color={"primary"}>
        Drinks
      </Button>
    </SplitButton>
    {BUTTON_SIZES[2]}:
    <SplitButton>
      <Button size={"regular"} color={"primary"}>
        Food
      </Button>
      <Button size={"regular"} color={"primary"}>
        Drinks
      </Button>
    </SplitButton>
    {BUTTON_SIZES[3]}:
    <SplitButton>
      <Button size={"large"} color={"primary"}>
        Food
      </Button>
      <Button size={"large"} primaryIcon={<IconAdd></IconAdd>}></Button>
      <Button size={"large"} color={"primary"}>
        Drinks
      </Button>
    </SplitButton>
  </div>
);

Directions

Row:

Column:

Column (Icon only):

"use client";

import {
  Button,
  IconAdd,
  IconFilter,
  IconSubtract,
  IconDeleteBin5,
  SplitButton,
} from "@brynlabs/fusion-ui";
import React from "react";

export const SplitButtonDirectionsExample = () => (
  <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
    Row:
    <SplitButton direction={"row"}>
      <Button color={"primary"}>Food</Button>
      <Button primaryIcon={<IconAdd />}></Button>
    </SplitButton>
    Column:
    <SplitButton direction={"column"}>
      <Button primaryIcon={<IconAdd />} fullWidth={true}></Button>
      <Button color={"primary"}>Food</Button>
      <Button primaryIcon={<IconSubtract />} color={"primary"}>
        Drinks
      </Button>
    </SplitButton>
    Column (Icon only):
    <SplitButton direction={"column"}>
      <Button primaryIcon={<IconAdd />}></Button>
      <Button primaryIcon={<IconFilter />}></Button>
      <Button primaryIcon={<IconDeleteBin5 />}></Button>
    </SplitButton>
  </div>
);

Button types & colors

"use client";

import {Button, IconAdd, IconFilter, SplitButton} from "@brynlabs/fusion-ui";
import React from "react";

export const SplitButtonTypesExample = () => (
  <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
    <SplitButton>
      <Button color={"success"} buttonStyle={"outline"}>
        Food
      </Button>
      <Button color={"success"} buttonStyle={"outline"}>
        Drinks
      </Button>
      <Button color={"success"} buttonStyle={"outline"} primaryIcon={<IconAdd></IconAdd>}></Button>
    </SplitButton>
    <SplitButton>
      <Button color={"primary"}>Food</Button>
      <Button color={"warn"} primaryIcon={<IconAdd></IconAdd>}></Button>
    </SplitButton>
    <SplitButton direction={"column"}>
      <Button color={"critical"} buttonStyle={"elevated"}>
        Food
      </Button>
      <Button color={"critical"} buttonStyle={"elevated"} primaryIcon={<IconAdd></IconAdd>}>
        Drinks
      </Button>
    </SplitButton>
    <SplitButton direction={"column"}>
      <Button color={"primary"} primaryIcon={<IconAdd />}></Button>
      <Button color={"primary"} buttonStyle={"outline"} primaryIcon={<IconFilter />}></Button>
    </SplitButton>
  </div>
);

Toggle split buttons

With ToggleButtons inside, the split button behaves like a group of radio buttons or checkboxes, e.g. for text formatting.

"use client";

import {useState} from "react";
import {
  IconMoon,
  IconSun,
  IconEmotionHappy,
  IconEmotionNormal,
  IconEmotionUnhappy,
  IconThumbDown,
  IconThumbUp,
  SplitButton,
  ToggleButton,
} from "@brynlabs/fusion-ui";

export const SplitButtonToggleExample = () => {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [thumb, setThumb] = useState<"up" | "down">("up");
  const [moods, setMoods] = useState<Array<"happy" | "neutral" | "sad">>([
    "happy",
    "neutral",
    "sad",
  ]);

  const toggleMood = (mood: "happy" | "neutral" | "sad") => {
    setMoods(current =>
      current.includes(mood) ? current.filter(value => value !== mood) : [...current, mood],
    );
  };

  return (
    <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
      <SplitButton>
        <ToggleButton
          active={theme === "light"}
          onChange={() => setTheme("light")}
          primaryIcon={<IconSun />}
        />
        <ToggleButton
          active={theme === "dark"}
          onChange={() => setTheme("dark")}
          primaryIcon={<IconMoon />}
        />
      </SplitButton>

      <SplitButton>
        <ToggleButton
          active={thumb === "up"}
          onChange={() => setThumb("up")}
          primaryIcon={<IconThumbUp />}
          color={"success"}>
          {thumb === "up" && "431k"}
        </ToggleButton>
        <ToggleButton
          active={thumb === "down"}
          onChange={() => setThumb("down")}
          primaryIcon={<IconThumbDown />}
          color={"critical"}>
          {thumb === "down" && "32k"}
        </ToggleButton>
      </SplitButton>

      <SplitButton>
        <ToggleButton
          active={moods.includes("happy")}
          onChange={() => toggleMood("happy")}
          primaryIcon={<IconEmotionHappy />}
          color="success"
        />
        <ToggleButton
          active={moods.includes("neutral")}
          onChange={() => toggleMood("neutral")}
          primaryIcon={<IconEmotionNormal />}
          color="primary"
        />
        <ToggleButton
          active={moods.includes("sad")}
          onChange={() => toggleMood("sad")}
          primaryIcon={<IconEmotionUnhappy />}
          color="critical"
        />
      </SplitButton>
    </div>
  );
};

Split Button

Overview

Sizes

Directions

Button types & colors

Toggle split buttons