Fusion UI

Overview

A ToggleButton switches a state on and off, like a checkbox in the shape of a button. Icon and label can change in the active state.

"use client";

import {useState} from "react";
import {IconEye, IconEyeOff, ToggleButton} from "@brynlabs/fusion-ui";

export const ToggleButtonExample = () => {
  const [active, setActive] = useState(false);

  return (
    <ToggleButton
      active={active}
      onChange={setActive}
      color={"primary"}
      primaryIcon={active ? <IconEyeOff /> : <IconEye />}>
      {active ? "Hide" : "Show"}
    </ToggleButton>
  );
};

Playground

active

disabled

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

<ToggleButton
  active={true}
  color={"primary"}
  size={"regular"}
  disabled={false}
  loading={false}>
</ToggleButton>

Toggle Button

Overview

Playground