component page starter

A full-width component detail pattern with a live preview, primary action buttons, code blocks, and implementation notes. Built to inspect before you copy.

Interactive Action Button→

Live Interactive Preview

Back to Component Gallery

HTML

<button class="btn-primary" type="button">
  <span>Interactive Action Button</span>
  <span aria-hidden="true">&rarr;</span>
</button>

CSS

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--ink, #0f172a);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

Usage Notes & Accessibility

Keyboard Support: Standard button elements receive native tab index and trigger on Enter / Space.
Contrast: Pure white text (#ffffff) on ink black (#0f172a) yields a contrast ratio of 18.2:1, far exceeding WCAG AAA.
Tokens: Uses var(--ink) for automatic synchronization with your theme.