IconCheckbox
A toggle that looks like a small secondary button with an icon; checked shows the primary border and a check mark in its corner.
import { IconCheckbox } from "@cynco-labs/ui";Example
import { useState } from "react";
import { ChartBarIcon, FunnelSimpleIcon, UsersIcon } from "@phosphor-icons/react";
import { IconCheckbox } from "@cynco-labs/ui";
export default function IconCheckboxDemo() {
const [s, setS] = useState(true);
return (
<div className="flex flex-wrap items-center gap-2">
<IconCheckbox
variant="secondary"
iconOrientation="left"
icon={<ChartBarIcon />}
checked={s}
onCheckedChange={setS}
>
Show chart
</IconCheckbox>
<IconCheckbox variant="secondary" iconOrientation="left" icon={<UsersIcon />} checked={false}>
Group by customer
</IconCheckbox>
<IconCheckbox variant="secondary" icon={<FunnelSimpleIcon />} checked aria-label="Show filters" />
</div>
);
}Use
Toggling views and options in toolbars and attach/cancel forms.
Props
Button props plus checked, onCheckedChange, icon, iconOrientation (left with a label, center icon-only, which needs an aria-label).
Notes
Default size sm. State is exposed as aria-pressed and shown by the corner check mark, not by colour alone. The mark sits slightly outside the button, so a clipping parent (overflow-hidden, or the primary variant's own clip) hides part of it.