# Components

This page codifies the recurring Payd Labs components seen in Stables,
Sentinel, Knowhere, Dispatch, OneLink, and Secret Share.

## Cards And Panels

Default panel:

```css
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
}
```

Use:

- `0.5rem` radius for compact panels and inputs.
- `0.75rem` radius for cards, tables, login panels.
- `0.875rem` only when a larger workflow card needs more softness.
- `px-5 py-4` for card body when space allows.
- `p-4` for dense metric cards.

Avoid nested card stacks. If content is nested, use dividers, lists, or surface
secondary blocks inside the parent.

## Metric Cards

Metric cards contain:

- 14-16px icon or small label row.
- 11px uppercase label.
- 24px Space Grotesk metric value.
- 12px secondary detail.

They sit in `grid grid-cols-2 lg:grid-cols-4 gap-3` or equivalent.

## Buttons

Base:

```css
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
```

Primary accent:

```css
.btn-accent {
  background: var(--color-accent);
  color: #ffffff;
}
.dark .btn-accent { color: #0a1829; }
.btn-accent:hover { opacity: 0.9; }
.btn-accent:active { transform: scale(0.98); }
```

Sizes:

| Size | Height | Padding | Text |
|---|---:|---:|---:|
| XS | 28px | 10px x-axis | 12px |
| SM | 32px | 12px x-axis | 14px |
| MD | 40px | 16px x-axis | 14px |
| LG | 48px | 24px x-axis | 16px |

## Icon Buttons

Use 36px square icon buttons for header and toolbar actions:

```css
.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
```

## Inputs

```css
.input {
  width: 100%;
  min-height: 38px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
}
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
```

Labels are 12px, semibold, secondary text. Helper text is 12px, tertiary text.

## Badges And Status Pills

Badges are compact and informational:

- Height: 20-24px.
- X padding: 8-10px.
- Radius: full for status, 6px for product pills.
- Font: 10-12px, semibold.

Product pill:

```html
<span class="bg-accent-100 text-accent-dark px-2 py-0.5 rounded-md text-[10px] font-semibold font-heading">
  Admin
</span>
```

Status pill:

```html
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold font-heading">
  completed
</span>
```

## Tables

Table shell:

```html
<div class="bg-surface rounded-xl border border-border overflow-hidden">
  <div class="overflow-x-auto">
    <table class="w-full text-sm">...</table>
  </div>
</div>
```

Header cells:

- `px-4 py-2.5`
- Space Grotesk.
- 12px.
- Uppercase.
- Secondary text.
- Surface-secondary background.

Body cells:

- `px-4 py-2.5`
- 12-14px.
- Monospace for references and addresses.
- Row hover: surface-secondary at partial opacity.

## Navigation

Sidebar nav item:

```html
<router-link class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] font-medium transition-all">
  ...
</router-link>
```

Use 16-17px Lucide icons. Active state is `bg-accent-100 text-accent-dark`.

## Callouts

Callouts use semantic pale backgrounds and a 1px tinted border. They are for
user-relevant information, warnings, or errors. Internal implementation status
belongs in docs and trackers, not user UI callouts.

## Skeletons And Loading

Skeletons use `surface-tertiary`, 8px radius, and either pulse or shimmer.
Loading rows should preserve the final layout dimensions.