Share Dialog
AI Pass+dialog#modal
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Dialog component
About Share Dialog
A modal share-link dialog built on the native `<dialog>` element — copy-to-clipboard with confirmation, a teammate access list, and a permission selector, fully token-driven and design-system agnostic.
Features
- Native
<dialog>element with built-in Escape-to-close and focus trapping - Backdrop scrim click-to-close with focus return to the trigger button
- Copy-to-clipboard link field with a transient "Copied!" confirmation state
- Teammate access list rendered safely via
textContent(no external sanitizer) - Permission selector for link-level access (view, edit, owner)
- Responsive layout that reflows the copy row down to 320px and respects reduced motion
Accessibility
- Dialog semantics
role="dialog",aria-modal="true",aria-labelledbyon the title- Close button
<button>witharia-label- Copy button
<button>witharia-labelupdated on copy- Form inputs
- Associated
<label>viafor/idfor input and select - Focus management
- Escape and backdrop close return focus to the trigger
- Focus indicators
:focus-visiblewith the accent--ringoutline on all elements- Hover / selected
- Accent border (
--shr-accent) plus the soft accent fill, never a neutral grey — state is never colour-only, the border also appears/thickens - Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Share Dialog in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dialog is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Modal Dialog
VanillaReact
A broadcast master-control confirm dialog — a dark CRT program monitor that powers on from a squashed scan line, with a mono OSD status row, a blinking REC tally, an SMPTE color-bar strip, and hardware HOLD / TAKE keys in signal cyan.
#dialog#modal#overlay
Dropzone Upload
VanillaReact
A drag-and-drop multi-file upload modal built on the native `<dialog>` element — a dashed dropzone with a floating upload icon, CSV/XLSX/XLS validation and a 25MB limit, a live selected-file list, and Cancel/Import actions. Fully token-driven and design-system agnostic.
#dialog#modal#upload
Bottom Sheet
ReactVanilla
A token-driven modal bottom pane that slides up from the bottom edge with a combined translateY, opacity, and blur transition — an investing quick-trade panel with a stock ticker, quantity stepper, and Buy/Sell actions, fully design-system agnostic.
#dialog
Alert Dialog
VanillaReact
A token-driven confirmation alert dialog with a destructive primary action, a cancel action, focus management, Escape to close, and a live result line — fully design-system agnostic.
#dialog
Pricing Cards
VanillaReact
A three-tier Atheros AI Builder pricing showcase with a highlighted "Most Popular" plan, monthly AI-credit badges, gradient gem icons, and a dark/light theme toggle — fully token-driven and design-system agnostic.
#pricing#cards
Skeleton — Outline
VanillaReact
An outline skeleton loading placeholder — wireframe shapes fill in one after another across an article card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#outline
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
