Skip to content
FelicityUI

Icon Button

Square icon control — same tokens as Button, label required for a11y.

Loading icon-button…

Installation

terminal
npx felicityui add icon-button --platform react

Usage

example.tsx
import { Button } from "@/components/ui/button"

<Button>Button</Button>

Felicity treatment: paper/ink surfaces, copper accent sparingly, hairline borders.

API Reference

PropTypeDefaultDescription
classNamestring—Additional classes.

Accessibility

WCAG 2.2 AA

  • Native semantics and keyboard support.
  • Visible focus indicator.
  • Sufficient contrast on semantic token pairs.

Platform notes

React

Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper accent used sparingly, hairline borders, and ruled layouts — not generic SaaS chrome.

  • Server Component compatible unless marked use client.
  • Uses data-slot attributes for anatomy.
  • Focus-visible rings use color.focus.ring.