Icon button

TS

import { … } from "@fungi.computer/caps/components/icon-button";

Hero

TSX

import { IconButton } from "@fungi.computer/caps/components/icon-button";

function StarIcon() {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2 15 9l7 1-5 5 1.5 7L12 18l-6.5 4L7 15l-5-5 7-1Z" />
    </svg>
  );
}

function TrashIcon() {
  return (
    <svg fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
      <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" />
    </svg>
  );
}

export default function Hero() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <IconButton aria-label="Favorite" icon={<StarIcon />} />
      <IconButton aria-label="Delete" icon={<TrashIcon />} tone="destructive" />
      <IconButton
        aria-label="More options"
        icon={<StarIcon />}
        variant="outline"
      />
    </div>
  );
}

Sizes

TSX

import { IconButton } from "@fungi.computer/caps/components/icon-button";

function StarIcon() {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2 15 9l7 1-5 5 1.5 7L12 18l-6.5 4L7 15l-5-5 7-1Z" />
    </svg>
  );
}

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <IconButton
        aria-label="Favorite"
        icon={<StarIcon />}
        iconSize="xs"
        size="xs"
      />
      <IconButton
        aria-label="Favorite"
        icon={<StarIcon />}
        iconSize="sm"
        size="sm"
      />
      <IconButton
        aria-label="Favorite"
        icon={<StarIcon />}
        iconSize="md"
        size="default"
      />
      <IconButton
        aria-label="Favorite"
        icon={<StarIcon />}
        iconSize="lg"
        size="lg"
      />
    </div>
  );
}

Active toggle

TSX

import { useState } from "react";
import { IconButton } from "@fungi.computer/caps/components/icon-button";

function StarIcon() {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2 15 9l7 1-5 5 1.5 7L12 18l-6.5 4L7 15l-5-5 7-1Z" />
    </svg>
  );
}

export default function ActiveToggle() {
  const [favorited, setFavorited] = useState(false);
  return (
    <IconButton
      active={favorited}
      aria-label={favorited ? "Remove favorite" : "Add favorite"}
      icon={<StarIcon />}
      onClick={() => {
        setFavorited((value) => !value);
      }}
    />
  );
}

Props

IconButtonProps

Prop	Type	Description
aria-label	string
active?	boolean
icon	ReactNode
iconSize?	"xs" | "sm" | "md" | "lg"
reveal?	boolean
size?	ButtonProps["size"] | "responsive"
tone?	"default" | "destructive"

• aria-labelstring
• active?boolean
• iconReactNode
• iconSize?"xs" | "sm" | "md" | "lg"
• reveal?boolean
• size?ButtonProps["size"] | "responsive"
• tone?"default" | "destructive"

Full types: API reference.