Save the Dogs Design System

Save the Dogs · teal

Resolved: light
Overview

Primitives

All 30 basic primitives, live, one anchor per component — link an anchor (e.g. /design-system/primitives/#toggle) when filing an issue against a primitive. Source of truth: portal-ds/ds/primitives/ (the portal-ds snapshot).

PrimitiveWhat it isSourceFull demo
Buttonprimary / secondary / ghost / danger actionsportal-ds/ds/primitives/Button.tsxbuttons →
Badgesmall tonal labelportal-ds/ds/primitives/Badge.tsxbadges →
StatusPillstate chip with optional dotportal-ds/ds/primitives/StatusPill.tsxbadges →
IconChiptoned icon squareportal-ds/ds/primitives/IconChip.tsxbadges →
NotificationBadgeunread count bubbleportal-ds/ds/primitives/NotificationBadge.tsxbadges →
Cardthe base surfaceportal-ds/ds/primitives/Card.tsxcards →
CompactCardheadered dense cardportal-ds/ds/primitives/CompactCard.tsxcards →
ActionCardicon + label link/CTA cardportal-ds/ds/primitives/ActionCard.tsxcards →
ActionCardRowsection header + grid of ActionCardsportal-ds/ds/primitives/ActionCardRow.tsxcards →
LockableToolCardgated tool entry (card)portal-ds/ds/primitives/LockableToolCard.tsxcards →
LockableToolRowgated tool entry (row)portal-ds/ds/primitives/LockableToolRow.tsxlists →
Inputsingle-line text inputportal-ds/ds/primitives/Input.tsxforms →
Textareamulti-line inputportal-ds/ds/primitives/Textarea.tsxforms →
Selectnative select, DS-skinnedportal-ds/ds/primitives/Select.tsxforms →
Labelform control labelportal-ds/ds/primitives/Label.tsxforms →
Fieldlabel + hint + error wrapperportal-ds/ds/primitives/Field.tsxforms →
Togglecontrolled switchportal-ds/ds/primitives/Toggle.tsxforms →
Alertinline toned messageportal-ds/ds/primitives/Alert.tsxfeedback →
EmptyStatenothing-here placeholderportal-ds/ds/primitives/EmptyState.tsxfeedback →
ErrorStateload-failure placeholderportal-ds/ds/primitives/ErrorState.tsxfeedback →
Skeleton / SkeletonTextloading placeholdersportal-ds/ds/primitives/Skeleton.tsxfeedback →
ListRowicon + title + action rowportal-ds/ds/primitives/ListRow.tsxlists →
CompactListItemdense list lineportal-ds/ds/primitives/CompactListItem.tsxlists →
SectionHeaderuppercase section labelportal-ds/ds/primitives/SectionHeader.tsxnavigation →
PageHeaderpage title blockportal-ds/ds/primitives/PageHeader.tsxnavigation →
PageTabshorizontal link tabsportal-ds/ds/primitives/PageTabs.tsxnavigation →
SideTabsvertical link railportal-ds/ds/primitives/SideTabs.tsxnavigation →
ProgressStepsnumbered step railportal-ds/ds/primitives/ProgressSteps.tsxworkflow →
PageContainerpage width frame (wraps this page)portal-ds/ds/primitives/PageContainer.tsxnavigation →
cnclass-merge utility (clsx + tailwind-merge)portal-ds/ds/primitives/cn.ts—

Button

portal-ds/ds/primitives/Button.tsx

Badge

portal-ds/ds/primitives/Badge.tsx

DefaultActiveBlockedPendingInfo

StatusPill

portal-ds/ds/primitives/StatusPill.tsx

OnlineDegradedOfflineDraft

IconChip

portal-ds/ds/primitives/IconChip.tsx

NotificationBadge

portal-ds/ds/primitives/NotificationBadge.tsx

Card

portal-ds/ds/primitives/Card.tsx

Default card (padding md).
Interactive card — hover me.

CompactCard

portal-ds/ds/primitives/CompactCard.tsx

Roster

updated 2 min ago

Card body content.

ActionCard

portal-ds/ds/primitives/ActionCard.tsx

Meet the members

Browse the directory.

Send an update

CTA-button form.

ActionCardRow

portal-ds/ds/primitives/ActionCardRow.tsx

Ways to get involved

People

Find your team.

Updates

Hear what's new.

LockableToolCard

portal-ds/ds/primitives/LockableToolCard.tsx

Bulk email

Unlocked tool.

Open

Data export

Locked tool.

Requires the director role.

LockableToolRow

portal-ds/ds/primitives/LockableToolRow.tsx

Bulk email
Data exportLocked: Requires the director role.
Requires the director role.

Input

portal-ds/ds/primitives/Input.tsx

Textarea

portal-ds/ds/primitives/Textarea.tsx

Select

portal-ds/ds/primitives/Select.tsx

Label

portal-ds/ds/primitives/Label.tsx

Field

portal-ds/ds/primitives/Field.tsx

Digits only.

Enter a 5-digit zip.

Toggle

portal-ds/ds/primitives/Toggle.tsx

Alert

portal-ds/ds/primitives/Alert.tsx

Heads up — the roster sync runs every 10 minutes.
Saved. Your changes are live.

EmptyState

portal-ds/ds/primitives/EmptyState.tsx

You're all caught up

No notifications right now.

ErrorState

portal-ds/ds/primitives/ErrorState.tsx

Something went wrong

We couldn't load your teams.

Skeleton / SkeletonText

portal-ds/ds/primitives/Skeleton.tsx

ListRow

portal-ds/ds/primitives/ListRow.tsx

March team Alpha
12 members
Quiet row
No icon, custom action
New

CompactListItem

portal-ds/ds/primitives/CompactListItem.tsx

Jane Doe
Organizer — Northlake
Active
Sam Reyes
Volunteer
Invited

SectionHeader

portal-ds/ds/primitives/SectionHeader.tsx

Your teams

Members

12 total

PageHeader

portal-ds/ds/primitives/PageHeader.tsx

Your dashboard

Everything you need to get involved.

PageTabs

portal-ds/ds/primitives/PageTabs.tsx

SideTabs

portal-ds/ds/primitives/SideTabs.tsx

ProgressSteps

portal-ds/ds/primitives/ProgressSteps.tsx

  1. Apply
  2. Verify email
  3. Pick a team
  4. March

PageContainer

portal-ds/ds/primitives/PageContainer.tsx — the width frame already wrapping every page of this catalog (no nested demo; see the page you're reading).

Width variants and gutters are demoed on the navigation & page structure page.

cn

portal-ds/ds/primitives/cn.ts — clsx + tailwind-merge; utility, nothing to render.

last conflicting class wins
cn("px-2", condition && "font-bold", "px-4") → "font-bold px-4"