Fusion UI

Playground

Buttons start an action, like saving a form or opening a dialog. Try out the combinations of style, color and size below.

disabled

import { Button } from "@brynlabs/fusion-ui"

<Button
  buttonStyle={"flat"}
  color={"primary"}
  size={"regular"}
  disabled={false}
  loading={false}>
</Button>

Color

The color tells what the action does: primary for the main action, neutral for everything else, success, warn and critical for actions with that outcome. currentColor takes the text color of the surrounding element.

"use client";

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

export const ButtonColorExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button color="primary">Primary</Button>
    <Button color="neutral">Neutral</Button>
    <Button color="success">Success</Button>
    <Button color="warn">Warn</Button>
    <Button color="critical">Critical</Button>
    <div style={{color: "var(--color--purple-500)"}}>
      <Button color="currentColor">Current Color</Button>
    </div>
  </div>
);

Style

The style sets the emphasis: flat is the strongest, followed by elevated, outline and ghost.

"use client";

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

export const ButtonStyleExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button color="primary" buttonStyle={"flat"}>
      Flat
    </Button>
    <Button color="primary" buttonStyle={"ghost"}>
      Ghost
    </Button>
    <Button color="primary" buttonStyle={"elevated"}>
      Elevated
    </Button>
    <Button color="primary" buttonStyle={"outline"}>
      Outline
    </Button>
  </div>
);

Size

"use client";

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

export const ButtonSizeExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button
      color="primary"
      size={"extraSmall"}
      primaryIcon={<IconFilter></IconFilter>}
      secondaryIcon={<IconChevronRight></IconChevronRight>}>
      ExtraSmall
    </Button>
    <Button
      color="primary"
      size={"small"}
      primaryIcon={<IconFilter></IconFilter>}
      secondaryIcon={<IconChevronRight></IconChevronRight>}>
      Small
    </Button>
    <Button
      color="primary"
      size={"regular"}
      primaryIcon={<IconFilter></IconFilter>}
      secondaryIcon={<IconChevronRight></IconChevronRight>}>
      Regular
    </Button>
    <Button
      color="primary"
      size={"large"}
      primaryIcon={<IconFilter></IconFilter>}
      secondaryIcon={<IconChevronRight></IconChevronRight>}>
      Large
    </Button>
  </div>
);

Width

Full width buttons fill their container, e.g. in sheets on phones.

"use client";

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

export const ButtonWidthExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button color="primary">Regular Width</Button>
    <Button
      onClick={() => {
        console.log("TEST");
      }}
      color="primary"
      fullWidth={true}>
      Full Width
    </Button>
  </div>
);

Icons

primaryIcon sits before the label, secondaryIcon after it. A button with only an icon needs an aria-label.

"use client";

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

export const ButtonIconsExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button color="primary" primaryIcon={<IconAdd></IconAdd>}></Button>
    <Button color="primary" primaryIcon={<IconAdd></IconAdd>}>
      Primary Icon
    </Button>
    <Button color="primary" secondaryIcon={<IconAdd></IconAdd>}>
      Secondary Icon
    </Button>
    <Button color="primary" primaryIcon={<IconAdd></IconAdd>} secondaryIcon={<IconAdd></IconAdd>}>
      Primary and Secondary Icons
    </Button>
  </div>
);

Icon sizes

"use client";

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

export const ButtonIconsSizesExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button size={"extraSmall"} color="primary" primaryIcon={<IconFilter />}></Button>
    <Button size={"small"} color="primary" primaryIcon={<IconFilter />}></Button>
    <Button size={"regular"} color="primary" primaryIcon={<IconFilter />}></Button>
    <Button size={"large"} color="primary" primaryIcon={<IconFilter />}></Button>
  </div>
);

Loading

While the action runs, the button shows a spinner and ignores further clicks. Its width stays the same.

"use client";

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

export const ButtonLoadingExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button
      loading={true}
      color="primary"
      primaryIcon={<IconAdd></IconAdd>}
      secondaryIcon={<IconAdd></IconAdd>}>
      Loading
    </Button>
    <Button loading={true} color={"critical"}>
      Loading
    </Button>
    <SplitButton>
      <Button color="primary">Loading</Button>
      <Button
        loading={true}
        color={"primary"}
        primaryIcon={<IconExpandDown></IconExpandDown>}></Button>
    </SplitButton>
  </div>
);

Disabled

"use client";

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

export const ButtonDisabledExample = () => (
  <div style={{gap: "1rem", display: "grid", placeItems: "start"}}>
    <Button color="primary">Default</Button>
    <Button disabled={true} color="primary">
      Disabled
    </Button>
    <Button disabled={true} loading={true} color="primary">
      Loading disabled
    </Button>
    <Button loading={true} disabled={true} color={"primary"} primaryIcon={<IconFilter />}></Button>
  </div>
);