# Spot Icon

> A brand-colored sticker around an icon that names a piece of content, like a feature, an empty state, or a card's header.

- Name: `spot-icon`
- Status: beta
- Categories: media, display
- File: the install writes `spot-icon.tsx` to your `ui` alias, `@/components/ui` by default.
- Gallery: https://arbokui.com/components/spot-icon
- Registry item: https://arbokui.com/r/spot-icon.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/spot-icon
   ```

## Use it for

- Naming a piece of content: a feature in a list, an empty state, a hub link, or a card's header.
- Use size lg over an empty state, md in a hub link or card header, and sm in a dense feature list.
- Use one spot per item. Pass any icon element, like \<Calendar /> from lucide-react.
- Its side margins hang outside its box, so the sticker's edge lines up with the text above or below it.

## Avoid it for

- Anything you press, and rows, menus, charts, and statuses. Use a plain icon there.
- Saying something with its color. Artwork colors are decorative; use a visible label for meaning.
- Sizes under 24px. Use a plain icon instead.

## Props

- `ink`: `string`. Optional artwork foreground color. Omit to follow the brand theme.
- `paper`: `string`. Optional sticker background color. Omit to follow the brand theme.
- `icon`: `ReactNode`. The icon on the sticker, like \<Calendar /> from lucide-react. It is sized for you.
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. sm is 24px, md is 32px, lg is 40px.
- `title`: `string`. Names the spot for screen readers. Without it the spot is hidden from them.
- `className`: `string`. Extra classes. Later classes win.

## Accessibility

- Without title the spot has aria-hidden, since the text beside it names the same thing.
- With title it is role="img" with that name.
- The default brand pair is checked at 4.5:1. Custom ink and paper colors are not contrast-checked.

## Examples

### Over an empty state

```tsx
import { CalendarDays } from "lucide-react";

<div className="flex flex-col items-center gap-3 text-center">
  <SpotIcon icon={<CalendarDays />} size="lg" />
  <p className="font-semibold">No events this week</p>
</div>
```

### In a feature list

```tsx
import { Bell, Users } from "lucide-react";

<ul className="flex flex-col gap-4">
  <li className="flex items-start gap-3">
    <SpotIcon icon={<Users />} />
    <p>Invite the whole team in one go.</p>
  </li>
  <li className="flex items-start gap-3">
    <SpotIcon icon={<Bell />} />
    <p>Reminders go out the day before.</p>
  </li>
</ul>
```

### Standing alone, with a name

```tsx
import { Trophy } from "lucide-react";

<SpotIcon icon={<Trophy />} title="Award" />
```