Component guide
This page collects the interaction language shared by the app and web products. Each group defines its boundary first, then demonstrates its key states through an interactive preview.
Forms and actions
Button variants
Current button variants and sizes, followed by the proposed action hierarchy.
Form field states
Editing, read-only, required, and error states remain explicit.
Selection controls
Select, checkbox, radio, switch, and slider shown as meaningful settings.
Date and time
Date and time form one scheduling decision.
Button variants
Current variants are primary, brand, secondary, secondary-white, secondary-gray, destructive, outline, ghost, and link.
Sizes are sm, default, lg, and xl. Buttons support a loading state. Deletion uses the destructive variant instead of relying on text alone to communicate risk.
Form field states
Editable, read-only, required, and error states must be explicit. Treat the label, description, control, and validation message as one information group. Validation cannot rely on red alone.
Selection controls
- Select chooses one item from a finite list.
- Checkbox represents an independent include or exclude choice.
- Radio represents mutually exclusive choices in a group.
- Switch represents an immediately applied on or off state.
- Slider selects a continuous value and displays the current number.
Place selection controls inside meaningful setting rows with visible labels and any necessary explanation.
Date and time
Date and time use a popover plus a specialized picker. When they form one scheduling decision, group them together and show the time zone and format clearly.
Content and navigation
Tabs
Current tabs and the proposed content-switching treatment.
General tabs
Used for three peer content areas.
Accordion
Current accordion and a more focused disclosure proposal.
When should Accordion be used?⌄
Use it for supporting content and progressive disclosure; never hide the primary task.
How should it move?⌄
Animate only to explain expansion and respect reduced motion.
Dropdown and Popover
Dropdown handles actions, popover preserves context, and tooltip adds supporting information.
Tabs switch peer content in one context. Accordions contain supporting disclosure. Dropdowns contain actions, popovers contain anchored content, and tooltips add short explanations without replacing visible labels.
Dialogs and sheets
Dialog
Review or edit content; focus is trapped while open and returns to the trigger when closed.
AlertDialog
Reserve it for irreversible or high-risk actions and name the consequence in the confirmation action.
Sheet
A supporting side workspace that preserves the context of the main page.
Dialogs support ordinary viewing or editing, alert dialogs are reserved for irreversible or high-risk decisions, and sheets provide side workspaces or mobile workflows. Every overlay needs a clear close path and managed focus.
Feedback and asynchronous states
Toast variants
The global toaster is mounted at the product root.
Toast is for transient results; use an inline alert, page error, or notification center for persistent reading, action, or recovery.
Inline alert and states
Persistent page feedback that does not depend on a toast timeout.
Progress and skeleton
Progress communicates measurable completion; skeletons keep layout stable.
Empty and retry
Empty, no result, permission, and error states need distinct messages.
Invites and work updates will appear here.
Toasts communicate short-lived outcomes. Use inline alerts or page states when information requires sustained reading, action, or recovery. Empty, no-result, permission, and error states remain distinct, and failures provide a recovery action.
Tables and data patterns
Table states
The current table wrapper handles horizontal overflow while consumers compose row states.
| Component | Layer | Status | Coverage |
|---|---|---|---|
| Button | Primitive | Stable | 100% |
| Dialog | Primitive | Review | 82% |
| Toast | Feedback | Needs rules | 68% |
Current page: 3
Card and badge system
Cards establish information hierarchy; badges label status while actions keep explicit verbs.
Keep status separate from the next action and use explicit verbs.
Keep status separate from the next action and use explicit verbs.
Keep status separate from the next action and use explicit verbs.
Table wrappers provide small-screen overflow, cards establish hierarchy, and badges communicate status only. Interactive content uses a button or link instead of turning a badge into an ambiguous control.
Agent chat and recording
Portal AI chat · Full sidebar
Combines the current Portal sidebar header, messages, and prompt input with sample data only.
I organized it into three trackable actions:
- Confirm partners and service sessions
- Collect feedback and impact evidence
- Complete the quarter-end summary
Message list
User messages retain warm-gray bubbles while assistant responses keep unfilled content, sources, and inline actions.
I organized it into three trackable actions:
- Confirm partners and service sessions
- Collect feedback and impact evidence
- Complete the quarter-end summary
Prompt input
Includes attachment, running, and disabled states.
Agent run
Long tasks show overall progress while tool activity explains only the current step.
Conversation history
History supports current conversation, search, new conversations, and more actions.
Mobile Agent Chat
Recreates the centered title, black user bubble, unfilled assistant reply, and rounded composer.
I organized it into three trackable actions:
- Confirm partners and service sessions
- Collect feedback and impact evidence
- Complete the quarter-end summary
Mobile Agent Voice
Listening, transcript-ready, and submission states live in one full-screen voice flow.
Say the task you want to give the AI agent
Conversation components cover the sidebar shell, messages, prompt input, agent runs, history, and voice states. Sources lead back to original material, while long tasks preserve overall progress and a recovery path after failure.
Relationship graphs and workflow nodes
Relationship graph
Select or drag a node to inspect its role in the project.
Relationship workflow
Project is the root node and every other node explains its relationship. Selection reveals name, type, and relationship, while current, completed, and next steps remain distinguishable at the same time.