Button

How to use it

Use for the single main action on a screen or card, such as "Create project" or "Save changes". Give it a short verb-led label and keep only one primary button visible per view so the next action is obvious.

Accessibility

Uses a native <button type="button">, so it is reachable by keyboard, activated with Enter or Space, and announced as a button with no extra ARIA needed. The focus-visible outline is visible against the page background, and the white label text on the blue fill meets 4.5:1 contrast.

Source (copy-ready)

<button type="button" class="dcl-button dcl-button--primary">
  Create project
</button>
<style>
.dcl-button {
  font: inherit;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
}
.dcl-button--primary {
  background-color: #1d4ed8;
  color: #ffffff;
}
.dcl-button--primary:hover {
  background-color: #1e40af;
}
.dcl-button--primary:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}
</style>