Components / Onboarding and feedback / Locked item
F6 · Onboarding and feedback
Locked item
A destination that stays visible, plus the empty state it opens.
<button type="button" class="c-navitem is-locked" aria-disabled="true">Holds <span class="c-lock">Locked</span></button>
<p class="c-empty">This example view is locked.</p>
<button type="button" class="btn sm">Request access</button>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A destination exists but is not available.
- People should see that it exists.
When not to use
- The destination should be omitted.
- The whole page is unavailable. Say so once, not on every item.
Usage
<button type="button" class="c-navitem is-locked" aria-disabled="true">Holds <span class="c-lock">Locked</span></button>
<p class="c-empty">This example view is locked.</p>
<button type="button" class="btn sm">Request access</button>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| is-locked | class | absent | Item shows the Locked label. |
| aria-disabled | true | absent | The item does not become the current page. |
| data-gated | region | hidden | Empty state for the locked view. |
Keyboard
| Key | Action |
|---|---|
| Enter | On a locked item, shows the empty state. |
| Enter | On Request access, records the request in the preview. |
Accessibility
- Locked is a word, not a picture.
- The empty state names the view and offers one action.
- The open item still uses aria-current.
Motion
- No motion.
Pattern origin
Pattern type: a locked destination and an empty gated page.