Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA button that explains why it is unavailable: aria-disabled instead of disabled so it stays focusable, with the reason in a tooltip and in its description.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when a primary action is blocked by something the person can fix: an unticked box, a missing field, a role. Telling them what to do beats a dead grey button.
Do not use it for obvious unavailability, and do not depend on the tooltip alone for the fix. A visible message next to the form is better when the reason matters a lot.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
reason | string | - | Why it is unavailable. Empty means enabled. |
onClick | () => void | - | Runs only when there is no reason. |
variant | Button variant | default | Button style. |
children | ReactNode | - | Button label. |
disabled button gets no focus or pointer events, so a tooltip on it never opens; aria-disabled keeps it focusable.aria-describedby, so it is read with the button, not only shown on hover.| Key | Action |
|---|---|
| Tab | focuses the button and shows the reason |
| Escape | hides the tooltip |
The pattern ships a Testing Library test (tooltip-disabled-reason.test.tsx) that covers focus, aria-disabled and description, the tooltip on focus and hover, ignored clicks and the enabled case.