A pressable Minecraft recipe-filter icon.
Preview
Example source could not be loaded: toggle-example. Reload this page to retry.Usage
Import Toggle from @/components/ui/toggle. Bind pressed/onPressedChange(next, details) or initialize defaultPressed. The primary example intentionally has no text children: its native artwork is the recipe-filter icon.
Composition
Provide aria-label for the icon's action. Use Toggle Group for related choices with shared keyboard navigation. toggleVariants is exported for styling composition, but does not broaden supported appearance.
API and accessibility
Only the default variant and size are supported; other values throw. The icon measures 26 by 16 logical pixels and scale defaults to 2. Adding text or rich children is a web composition outside the native icon claim. The playground includes disabled state.
See the underlying API for shared semantics.
Disabled filter
Example source could not be loaded: toggle-disabled-example. Reload this page to retry.Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import "./minecraft-toggle-assets.css";
import { playMinecraftClick } from "./minecraft-sound";