Across UI Kit — Buttons & Controls

Action triggers that incorporate the Across Wing mechanics. Available in primary, secondary, ghost variants, and app accent colors.

Usage

Use Primary for main actions, Secondary for alternatives, and Ghost for tertiary actions. Accent colors (Work, Look, Share) reinforce app context within the suite.

HTML

<button class="across-btn across-btn--primary">Primary</button>
<button class="across-btn across-btn--secondary">Secondary</button>
<button class="across-btn across-btn--ghost">Ghost</button>

<!-- With icon -->
<button class="across-btn across-btn--work">
  <i class="ph-light ph-briefcase"></i>
  Work
</button>

<!-- Sizes -->
<button class="across-btn across-btn--primary across-btn--sm">Small</button>
<button class="across-btn across-btn--primary across-btn--lg">Large</button>

On/off switches for binary settings. Includes app accent variants and a small size.

Default (Look)

Work Accent Small size

HTML

<label class="across-switch">
  <input type="checkbox" class="across-switch__input">
  <span class="across-switch__track">
    <span class="across-switch__thumb"></span>
  </span>
  <span class="across-switch__label">Enable feature</span>
</label>

<!-- App accent variant -->
<label class="across-switch across-switch--work">...</label>
<label class="across-switch across-switch--share">...</label>

<!-- Small size -->
<label class="across-switch across-switch--sm">...</label>

Connected buttons for related actions or toggles. Perfect for view switchers, filters, and segmented controls.

Connected Buttons

Toggle (Single Active)

Segmented Control

Pill Shape

HTML

<!-- Basic connected buttons -->
<div class="across-btn-group">
  <button class="across-btn across-btn--secondary">Day</button>
  <button class="across-btn across-btn--secondary">Week</button>
  <button class="across-btn across-btn--secondary">Month</button>
</div>

<!-- Toggle variant (single active) -->
<div class="across-btn-group across-btn-group--toggle" role="group">
  <button class="across-btn is-active" aria-pressed="true">List</button>
  <button class="across-btn" aria-pressed="false">Grid</button>
</div>

<!-- Segmented control (outlined) -->
<div class="across-btn-group across-btn-group--outlined">
  <button class="across-btn">1D</button>
  <button class="across-btn is-active">1W</button>
  <button class="across-btn">1M</button>
</div>

<!-- Pill shape -->
<div class="across-btn-group across-btn-group--pill">...</div>

<!-- Sizes -->
<div class="across-btn-group across-btn-group--sm">...</div>
<div class="across-btn-group across-btn-group--lg">...</div>

Custom-styled checkboxes with indeterminate state support and descriptions.

Checked option Unchecked option Disabled option

Enable notifications Receive email updates when someone mentions you in a comment. Indeterminate (partial selection)

Small Default Large

Structure: <label class="across-checkbox"> wraps input, box, and label

Sizes: .across-checkbox--sm, default, .across-checkbox--lg

Modifiers: .across-checkbox--with-desc for description text

Indeterminate: Set via JS: checkbox.indeterminate = true

Radio button groups for single-select options with keyboard navigation.

Structure: .across-radio-group wraps individual .across-radio labels

Layout: Default is vertical; add .across-radio-group--horizontal for inline

Descriptions: Use .across-radio--with-desc with .across-radio__content wrapper

Buttons & Controls

Button

Usage

Switch

Button Group

Checkbox

Radio Group

Drawer Example

Bottom Sheet

Buttons & Controls

Button

Usage

Switch

Button Group

Checkbox

Radio Group

Modal Example

Drawer Example

Bottom Sheet