Design systemWidget access dialog
Generates a link to a widget's latest output, for use outside Petavue.
import { WidgetAccessDialog } from "@/ui";WidgetAccessDialog matches the Figma Widget Access component. It opens from a dashboard widget's menu. It walks through four states: Generate, Generating, Copy Link and Copied. It is a Small Dialog with no icon and no footer.
Try it
Generate a link, copy it, then open Additional information to see the API key. Copied changes back to Copy Link after two seconds.
const [link, setLink] = useState(null);
const [generating, setGenerating] = useState(false);
<WidgetAccessDialog
link={link}
generating={generating}
onGenerate={async () => { setGenerating(true); setLink(await createLink()); setGenerating(false); }}
apiKey={user.apiKey}
docsHref="/docs/widget-links"
onOpenProfile={() => navigate("/profile")}
onClose={close}
/>States
| Figma state | Props | Button |
|---|---|---|
| Generate | no link | primary "Generate Link" with a link icon |
| Generating | generating | Primary 300, "Generating Link" with a Spinner, not clickable |
| Copy Link | link | Link field, then primary "Copy Link" |
| Copied | after a click on Copy Link | "Copied" with a check, for two seconds |
Once there is a link, the Additional information box appears below it. Closed, it shows one line. Open, it explains the file formats and the API key, and shows the key masked, with buttons to reveal and copy it.
Anatomy
| Part | Spec |
|---|---|
| Panel | Small Dialog, 460px, no icon, no footer |
| Body | 12px text, 0 12px 16px padding, 16px gaps |
| Link field | Grey 50 fill, 0.5px Grey 200 border, 8px radius, 12px Grey 600 text cut with an ellipsis |
| Buttons | Full-width Medium Buttons, 10px below the field |
| Additional information | 1px Grey 100 border, 6px radius, 8px padding, 12px Grey 600 text. File types in JetBrains Mono on Grey 50 |
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
link | string | null | null | Set it once generated. |
generating | boolean | false | |
onGenerate | function | ||
apiKey | string | Shown masked. Leave it out to hide the key row. | |
docsHref | string | "Know more" link. Leave it out to hide it. | |
onOpenProfile | function | The Profile link. | |
onClose | function |
Accessibility
- The Additional information toggle is a button with
aria-expanded. - The reveal and copy buttons for the key are labelled "Show API key" and "Copy API key".
- The Copy Link button is
aria-live, so screen readers hear "Copied".