# Icon key

A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.

Kit part · With the Kit · https://tactileui.dev/parts/icon-key

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

How it is built, line by line, comes with its code and styling.

## Variants

- Square
- Round · power, transport
- Sizes
- Contrast · the one action

## States

- Rest
- Hover
- Pressed
- Latched
- Focus
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| aria-label | attribute | The key’s name. Screen readers read this, not the icon. |
| data-tip | attribute | The name, printed above on hover and focus. |
| aria-pressed | attribute | For latching keys, like power. |
| svg | element | Any icon drawn in currentColor, marked aria-hidden. |

## Usage notes

Hover or Tab to a key to see its name. Power latches.

## Accessibility

- The tip shows on keyboard focus as well as hover. On touch there is no hover, so use icons people already know.

## Related parts

- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Tooltip](https://tactileui.dev/parts/tooltip): A few words on a small label plate, the kind riveted beside a control on a rack: printed in the contrast colours with a rule just inside its edge and a short tab aimed at its key. It comes up when a pointer rests on the key or the keyboard reaches it, is read by a screen reader, and goes on Escape.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.