Components | Buttons - Cards - Forms

Buttons

Buttons allow users to trigger actions and move through flows. Use buttons consistently to highlight primary and secondary actions.

Overview

Buttons are used to submit forms, confirm actions, and navigate between key views. Use one primary button per surface to clearly signal the main action, and avoid overwhelming users with too many competing calls to action.

When to use

  • To start or complete a primary task on the page.
  • To trigger modals, dialogs, or secondary workflows.
  • To clearly show destructive actions (using danger styles).

When not to use

  • For inline actions in text — use links instead.
  • For navigation inside large menus — prefer nav links.

Examples

Button variants

Sizes

Code

HTML

<button class="btn btn--primary">Primary Button</button>

CSS (tokens & utilities)

:root {
  --color-btn-primary-bg: var(--color-primary);
  --color-btn-primary-text: #ffffff;
  --radius-button: 4px;
  --space-inline-button: var(--space-4);
  --space-block-button: var(--space-2);
}

.btn {
  border-radius: var(--radius-button);
  padding: var(--space-block-button) var(--space-inline-button);
  font: var(--font-button);
}

Usage guidelines

Do

  • Use one primary button per page or card.
  • Use clear, action-oriented labels (for example, “Run query”, “Save changes”).
  • Pair primary and secondary buttons thoughtfully, placing the primary action to the right in left-to-right layouts.
  • On desktop, use natural-width buttons; on mobile, use full-width buttons for important actions.
  • Keep spacing between buttons and other elements consistent using the spacing tokens.

Don’t

  • Don’t place multiple primary buttons side by side.
  • Don’t overuse accent buttons so they compete with primary ones.
  • Don’t rely only on color for destructive actions; use explicit labels like “Delete database”.
  • Don’t use playful or icon-only buttons (like the Blueberry button) for high-risk or critical tasks.
  • Don’t cram too many buttons into the same area; consider links or menus for tertiary actions.

Cards

Cards group related information and actions into a single surface. They are used throughout Bilberry to display database instances, summaries, and quick actions in a consistent way.

Overview

Cards provide a flexible container for content such as titles, metrics, descriptions, and actions. They help organize information into scannable blocks and should be used consistently across dashboards and detail views.

When to use

  • To group related content and actions into a single surface.
  • To present key information users need to scan quickly.
  • To show collections of similar items, such as database instances.

When not to use

  • For simple, single-line content that could be a list row instead.
  • For entire pages or layouts—use standard page sections, not oversized cards.

Examples

Basic card

A simple card with a title, description, and a single action.

Analytics database

Tracks product analytics events and dashboard queries. Updated nightly.

Card with metadata

Cards can include secondary metadata such as environment, status, or key metrics.

Billing service

Environment: Production
Status: Online
Last deployment: 2 hours ago

Card grid

Cards can be displayed in a responsive grid. On smaller screens, cards stack vertically in a single column.

Analytics DB

Queries today: 1,248
Uptime: 99.98%

Events DB

Queries today: 872
Uptime: 99.95%

Reporting DB

Queries today: 432
Uptime: 99.90%

Code

HTML structure

<div class="card">
  <h3 class="card__title">Card title</h3>
  <p class="card__body">
    Optional supporting description text goes here.
  </p>
  <button class="btn btn--secondary">Action</button>
</div>

CSS (using design tokens)

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
}

.card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

Sign-in form

The sign-in component lets users access their Bilberry account safely and consistently. It uses the same spacing, typography, and button tokens as the rest of the design system.

When to use

  • On dedicated authentication pages (Sign in / Sign up).
  • Inside a modal when authentication is required inline.
  • For “returning user” flows where only email + password is needed.

Best practices

  • Keep the form focused: email, password, and one primary action.
  • Use clear error messages and helper text under each field.
  • Offer a secondary action for “Forgot password” and sign-up.

Examples

Default sign-in card

A basic sign-in card with email, password, primary action, and a subtle secondary link.

Sign in to Bilberry

Enter your credentials to access your databases.

Forgot your password?

Compact sign-in

Use a compact layout inside a modal or small panel, keeping the same tokens but reducing vertical spacing.

Sign in

↑