Components / Onboarding and feedback / Soft gate
F4 · Onboarding and feedback
Soft gate
A limit notice with one action that reveals the rest of the example list.
<div class="c-banner">
<span>Showing 4 of 12 example records.</span>
<button type="button" class="btn sm">Show the full list</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A list is shortened and the full set is one action away.
- The notice states both numbers.
When not to use
- The hidden rows are not available.
- The next step needs an account. See the timed gate, which stays off.
Usage
<div class="c-banner">
<span>Showing 4 of 12 example records.</span>
<button type="button" class="btn sm">Show the full list</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| banner | text | — | Visible count and total count. |
| data-show-all | button | — | Reveals rows marked data-extra. |
| data-extra | attribute | absent | Rows past the limit. |
Keyboard
| Key | Action |
|---|---|
| Enter | Activates Show the full list. |
Accessibility
- The banner states both counts.
- There is one primary button.
- Revealed rows are normal list items.
Motion
- Rows appear without animation.
Pattern origin
Pattern type: a limit notice with one action.