Group 2

Components

The reusable pieces each Page is assembled from. Buttons, multi-choice, lists, cards, status pills, modals, inline elements. Each block lists when to reach for it.

Components

Reusable response components — buttons, choices, lists, links, cards, status

Buttons

Primary for the one main action. Secondary for alternatives. Ghost for low-emphasis. Destructive for irreversible actions.

External link button

For pointers off-platform. Monospace + arrow makes the destination scannable. Internal subdomains (*.stlabs.com) navigate directly; off-domain links trigger the confirmation modal below.

External link confirmation

Off-domain links (anything outside *.stlabs.com) prompt before navigation. Mirrors Claude's pattern — keeps users from being yanked off-platform unexpectedly and surfaces the destination URL for verification.

Single select · radio

Pick one. Selection state is shown via background fill alone — no dot or checkmark icon (matches Claude's pattern). Always include Decide for me as an opt-out, and pair an Other pill with an inline text input as an escape for unlisted options.

Which device are you using?
We'll tailor the troubleshooting steps

Multi-select · checkbox

Pick one or more. Same minimal selection state as radio — fill alone, no checkmark. Use the helper "select all that apply" so users know it's not exclusive. Decide for me is omitted (multi-select already supports skipping by selecting nothing).

What are you seeing?
Select all that apply

Numbered list

Sequential steps. Circle badges keep the column structure tidy when steps wrap.

  1. Open Company Portal from the Start menu.
  2. Install GlobalProtect and launch it.
  3. Enter vpn.stlabs.com and click Connect.

Bulleted & checklist

Bulleted for non-sequential facts. Checklist for "things to confirm" or progress — read-only display, not interactive (use radio/checkbox above for input).

  • Your laptop is already enrolled in MDM.
  • Okta is the identity provider for VPN.
  • Tunnel auto-disconnects after 12 hours.
  • Installed GlobalProtect
  • Signed in with Okta
  • Approved push on phone

Source cards

Two-up grid under any answer that cited evidence. Click to open the source.

Knowledge Base · KB-218
VPN setup for new laptops (GlobalProtect)
Knowledge Base · KB-046
Okta MFA enrollment and recovery

Recommended workflow card

stlabs differentiator — surface a runbook the responder (or user) can run, not just docs to read.

Run VPN Setup playbook
Auto-installs GlobalProtect · enrolls Okta · ~2 min

Prior activity

stlabs differentiator — what the user already tried before opening the ticket. Goes in the responder view.

Prior activity · last 30 min
  • Searched KB for "vpn won't connect" 12 min ago
  • Ran @Reset network stack 8 min ago
  • Replied in #it-help thread 3 min ago

Tool-call pill

Compact indicator for retrieval / tool use. Click to expand sources.

Searched Knowledge Base and Web · 2 sources

Status pills

For ticket state across list, header, and inline mentions.

Open Agent processing Resolved Escalated

Tab group

When the same answer has platform / role variants. Keep ≤4 tabs.

Inline elements

Code, links, and mentions inside running text.

Set VPN_PORTAL=vpn.stlabs.com, then ask @Natalie to approve in the access portal.

AI disclaimer

Quiet, persistent reminder under composer or end of message.

Answers are AI-generated · verify before acting