Icon Button Pattern
Keep icon-only controls compact without making them guesswork.
What it adds
A rule set for controls that show an icon and no label, covering naming, hit area, tooltips, and interaction states.
What your agent is told to do
5
What your agent is told to do
5-
1
List every icon-only control in the app and give each one a written accessible name that describes the action, not the picture. Close dialog, not cross.
-
2
Restrict icon-only treatment to actions whose meaning is genuinely conventional or whose context makes them obvious — a close, a menu, an overflow, a sort. Anything else gets a label.
-
3
Size the icon and the hit area independently, so a sixteen pixel icon still sits inside a target large enough for a thumb, with the extra area coming from padding rather than from a larger glyph.
-
4
Define hover, focus, active, disabled, and selected for every icon button, and make the selected state distinguishable from hover so a toggled control does not read as merely pointed at.
-
5
Do not rely on a tooltip to carry the meaning. Tooltips never appear on touch, are slow on keyboard, and vanish for anyone using magnification — treat them as a reminder for people who already know.
Edge cases it handles
7
Edge cases it handles
7- An icon button with no accessible name is announced as an unlabelled button, which makes the control unusable by anyone not looking at the screen.
- Tooltips are unavailable on touch devices and delayed on keyboard focus, so any control whose only explanation is a tooltip is unlabelled for a large share of users.
- The visible icon and the clickable area are different measurements. Enlarging the glyph to reach a comfortable target makes the interface shout; enlarging the padding does not.
- Every interaction state must be defined explicitly, including the toggled-on state. A missing selected style leaves the user unable to tell whether the filter, the mute, or the pin is currently active.
- Adjacent icon buttons in a toolbar need enough separation that their hit areas do not overlap, or users will activate the neighbour.
- An icon whose meaning changes with state, such as play becoming pause, must change its accessible name at the same moment as its glyph.
- Overflow menus triggered by an icon must remain reachable by keyboard and must return focus to the trigger when they close.
Definition of done
8
Definition of done
8- Every icon-only control has an accessible name describing its action.
- No control depends on a tooltip to be understood.
- Hit areas meet the minimum touch target while the icons stay at their intended visual size.
- Hover, focus, active, disabled, and selected are each visually distinct.
- Toggled controls announce and display their current state.
- Adjacent icon buttons have non-overlapping hit areas.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Avatar Group
Avatar Group
Show who is involved in a compact space without a pile of broken images.
What it does
A stacked set of member avatars with deterministic ordering, an overflow count, and access to the full list.
How it works
- 1 Find the places that show several people at once — assignees, collaborators, workspace members, comment participants — and render them through one grouped component.
- 2 Order the stack deterministically by a stable rule such as role then name, so the same group renders in the same order on every load and every device.
- 3 Cap the number shown and collapse the remainder into a single count that is announced meaningfully, not as a bare number sitting after a row of pictures.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/avatar-group
Screen Reader Only Utility
Screen Reader Only Utility
One tested way to add text for assistive technology without it appearing on screen.
What it does
A single visually hidden utility used for labels, instructions, and context that assistive technology needs and sighted users do not.
How it works
- 1 Find every place the app currently hides text from sight — off-screen positioning, zero dimensions, transparent colour, tiny font sizes, aria-label strings duplicating nearby copy — and consolidate them onto one utility.
- 2 Build it by clipping the element to nothing while keeping it rendered and in the accessibility tree: it must occupy no visual space and contribute nothing to layout, yet still be read in document order.
- 3 Provide a second variant that becomes visible when it receives focus, and use it for skip links and any other hidden content that is itself focusable.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/screen-reader-only-utility
Landmark Shell
Landmark Shell
Give every page the same navigable regions so people can jump straight to the content.
What it does
A reusable application shell providing labelled banner, navigation, main, complementary, and contentinfo regions on every route.
How it works
- 1 Find the layouts the app already renders and identify what each region actually is — the top bar, the primary navigation, the page body, any inspector or sidebar, the footer — then express them as landmarks once in the shell rather than per page.
- 2 Give the shell exactly one main region per rendered page, and make it the target of a skip link that is the first focusable thing in the document.
- 3 Label every landmark that appears more than once so they can be told apart — primary navigation, breadcrumb, pagination — using a short distinct name rather than the word navigation repeated.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/landmark-shell
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.