Actions
Icon button
A bare icon in the header: search, wishlist, account, bag. A 40px target around a 20px glyph, with an optional count set inside the bag.
components/coach/icon-button.tsx
Examples
Usage
import { ShoppingBag } from "lucide-react";
import { IconButton } from "@/components/coach/icon-button";
<IconButton badge={2} label="Bag, 2 items">
<ShoppingBag />
</IconButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | The accessible name. Required: the button has no visible text. Include the count when there is one. |
| badge | number | — | A count set inside the glyph, as on coach.com. Zero still shows. |
| children* | ReactNode | — | One Lucide icon. The stroke is set to 1.25 for you. |
| ...props | ButtonHTMLAttributes | — | onClick and the rest. |
Guidance
Do
- Use Lucide icons at stroke 1.25 so they match the hairline type.
Don't
- Add a filled background or a circle. The glyph is the button.