GatedAction

An action that is not available yet, with the reason and what unlocks it. Use it instead of a silently disabled button whenever the person can do something about it.

GatedAction

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, GatedAction

Title

Add a title to publish.

Dark theme, GatedAction

Title

Add a title to publish.

High contrast theme, GatedAction

Title

Add a title to publish.

UsageLink to the section Usage

tsx

import { GatedAction } from '@skribly/ui/actions'

tsx

<GatedAction isGated={!title} reason="Add a title to publish." onPress={publish}>
  Publish
</GatedAction>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Stays in the tab order with aria-disabled, so keyboard and screen reader users reach it and hear the reason, linked with aria-describedby.
Presses and form submission are blocked.
The reason is printed under the button, or shown as a tooltip on hover and keyboard focus in tight spaces, and is never colour alone.

This demo runs through axe in all three themes on every test run. See what the tests check.