Access Chip
How far one record reaches, as one focusable chip that opens Share.
- Status
- Since
0.23.116- Accessibility pattern
- a button named by its reach; the sentence describes it
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Access Chip before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify access-chipInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/access-chipRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
The same command installs the registry items it composes: @vegastack/button, @vegastack/space-avatar, @vegastack/tooltip.
Usage
import { AccessChip } from "@/components/ui/access-chip";
<AccessChip
access={
record.mode === "invited"
? { kind: "invited" }
: !record.space
? { kind: "hidden", hint: record.spaceHint }
: record.space.access === "personal"
? { kind: "personal" }
: { kind: "space", space: record.space }
}
published={record.publicLink !== null}
onClick={share.show}
/>;One chip in a record's header replaces a row of bare access glyphs. It shows the space's tile and
name (everyone in that space can open it), a lock and "Only invited", or a person-with-lock and "My
space". For a space the viewer cannot see, { kind: "hidden", hint } shows "Priya's My space"
(person-with-lock) or "Private space" (lock) — the SpaceHint names a kind of space, never the
space. A small globe joins any of them when the record is published to the web. It is a real button that opens
Share, with the full sentence in a tooltip on hover and focus.
Scope
- Owns: the glyph, the name, the published globe and the sentence.
- Does not own: opening Share —
onClickis the host's — or deciding the reach. - Compose with:
AvatarStackbeside it, andshare-01.
Examples
Icon only
For a narrow header: the glyph alone, the name in the accessible label.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
access* | AccessChipAccess | — | Who can open the record. |
iconOnly | boolean | false | Only the glyph (and the globe), for a narrow header; the name moves into the accessible label. |
loading | boolean | — | Shows a spinner over the label, blocks activation and sets aria-busy. The label keeps its
box at opacity: 0, so the button's width does not move and its accessible name survives
(API-5, A11Y-12). |
published | boolean | false | A public link is live; a small globe joins the chip. |
Data attributes and CSS variables on AccessChip
| Attribute | Values |
|---|---|
data-access | mirrors a prop or state value |
data-published | "" |
data-slot | "access-chip" | "access-chip-icon" | "access-chip-published" |
Accessibility
- A button named by the reach ("Product", "Only invited", "My space", plus ", Published"); the full sentence is its accessible description and its tooltip.
- Keyboard reachable, unlike a decorative icon.
| Key | Action |
|---|---|
| Enter / Space | Open Share |
| Contract | States tested |
|---|---|
| Behaviour | default, published, icon-only, tooltip, hidden-space |
| Accessibility | labeled, keyboard, browser-accessibility-test |
| Visual | default, hover, focus |