ButtonGroupItem

import { ButtonGroup, ButtonGroupItem } from "@nexera-ui/react";
import { LuColumns3, LuList, LuTable } from "react-icons/lu";

const sizes = ["sm", "md"] as const;

export function Sizes() {
  return (
    <div className="flex flex-col items-start gap-4">
      {sizes.map((size) => (
        <ButtonGroup key={size} aria-label={`View (${size})`} defaultSelectedKeys={["list"]}>
          <ButtonGroupItem id="list" size={size} label="List" icon={<LuList />} />
          <ButtonGroupItem id="board" size={size} label="Board" icon={<LuColumns3 />} />
          <ButtonGroupItem id="table" size={size} label="Table" icon={<LuTable />} />
        </ButtonGroup>
      ))}
    </div>
  );
}

import { ButtonGroup, ButtonGroupItem } from "@nexera-ui/react";
import { LuColumns3, LuList, LuTable } from "react-icons/lu";

export function IconOnly() {
  return (
    <ButtonGroup aria-label="View" defaultSelectedKeys={["board"]}>
      <ButtonGroupItem id="list" aria-label="List" icon={<LuList />} />
      <ButtonGroupItem id="board" aria-label="Board" icon={<LuColumns3 />} />
      <ButtonGroupItem id="table" aria-label="Table" icon={<LuTable />} />
    </ButtonGroup>
  );
}

import { ButtonGroup, ButtonGroupItem } from "@nexera-ui/react";

export function MultipleSelection() {
  return (
    <ButtonGroup
      aria-label="Status filter"
      selectionMode="multiple"
      defaultSelectedKeys={["active", "remote"]}
    >
      <ButtonGroupItem id="active" label="Active" />
      <ButtonGroupItem id="leave" label="On leave" />
      <ButtonGroupItem id="remote" label="Remote" />
    </ButtonGroup>
  );
}

import { ButtonGroup, ButtonGroupItem } from "@nexera-ui/react";

export function DisabledAndOnly() {
  return (
    <div className="flex flex-col items-start gap-4">
      <ButtonGroup aria-label="View" defaultSelectedKeys={["list"]}>
        <ButtonGroupItem id="list" label="List" />
        <ButtonGroupItem id="board" label="Board" isDisabled />
        <ButtonGroupItem id="table" label="Table" />
      </ButtonGroup>
      <ButtonGroup aria-label="View (read only)" isDisabled defaultSelectedKeys={["board"]}>
        <ButtonGroupItem id="list" label="List" />
        <ButtonGroupItem id="board" label="Board" />
      </ButtonGroup>
      <ButtonGroup aria-label="Pinned">
        <ButtonGroupItem id="only" label="Only" />
      </ButtonGroup>
    </div>
  );
}

import { ButtonGroup, ButtonGroupItem } from "@nexera-ui/react";

export function LongLabels() {
  return (
    <div className="max-w-xs">
      <ButtonGroup aria-label="Period" defaultSelectedKeys={["month"]}>
        <ButtonGroupItem id="month" label="This month" />
        <ButtonGroupItem id="quarter" label="This quarter, including bank holidays" />
        <ButtonGroupItem id="year" label="Year" />
      </ButtonGroup>
    </div>
  );
}

import { IconSlot, buttonGroupItemStyles } from "@nexera-ui/react";
import { LuList } from "react-icons/lu";

const sizes = ["sm", "md"] as const;

export function WithIconMatrix() {
  return (
    <div className="flex flex-col items-start gap-4 p-8">
      {sizes.map((size) => (
        <button
          key={size}
          type="button"
          data-figma-variant={`Size=${size}, Position=Only, State=Default, Show icon=true`}
          className={buttonGroupItemStyles({ size })}
        >
          <IconSlot className={buttonGroupItemIconStyles({ size })}>
            <LuList />
          </IconSlot>
          <span>List</span>
        </button>
      ))}
    </div>
  );
}