Buttons

A button is an interactive element that allows users to trigger an action, such as submitting a form, opening a dialog, or performing an operation.

Examples

Basic Button

Use the .ro-btn class to create a button. It can contain text and an optional icon.

<button class="ro-btn">Button</button>

Preview

Button

Sizing

Adjust the button size with .ro-size-xs, .ro-size-sm, or .ro-size-lg classes.

New HTML structure

For extra small and small buttons (.ro-size-xs, .ro-size-sm), the text content must be wrapped in a .ro-btn-text element to ensure proper padding and alignment.

<button class="ro-btn ro-size-xs"><span class="ro-btn-text">Extra small</span></button>
<button class="ro-btn ro-size-sm"><span class="ro-btn-text">Small</span></button>
<button class="ro-btn">Medium</button>
<button class="ro-btn ro-size-lg">Large</button>

Preview

Extra smallSmallMediumLarge

Variants

There are several button variants available to suit different contexts and levels of emphasis. Use variant classes like .ro-variant-outlined, .ro-variant-muted, .ro-variant-ghost, or .ro-variant-link.

<button class="ro-btn ro-variant-outlined ro-color-scheme-product">
  <span class="ro-btn-text">Outlined</span>
</button>
<button class="ro-btn ro-variant-dashed ro-color-scheme-product">
  <span class="ro-btn-text">Dashed</span>
</button>
<button class="ro-btn ro-variant-muted ro-color-scheme-product">
  <span class="ro-btn-text">Muted</span>
</button>
<button class="ro-btn ro-variant-ghost ro-color-scheme-product">
  <span class="ro-btn-text">Ghost</span>
</button>
<button class="ro-btn ro-variant-muted-outlined ro-color-scheme-product">
  <span class="ro-btn-text">Muted-outlined</span>
</button>
<button class="ro-btn ro-variant-link ro-color-scheme-product">
  <span class="ro-btn-text">Link</span>
</button>

Preview

OutlinedDashedMutedGhostMuted-outlinedLink

Use .ro-variant-dashed with .ro-size-sm or .ro-size-md-sm for compact dashed actions (for example “add item” controls).

<button class="ro-btn ro-variant-dashed ro-color-scheme-product ro-size-sm">
  <i class="ro-icon ro-icon-rocket"></i>
  <span class="ro-btn-text">Dashed</span>
</button>
<button class="ro-btn ro-variant-dashed ro-color-scheme-product ro-size-md-sm active">
  <i class="ro-icon ro-icon-rocket"></i>
  <span class="ro-btn-text">Dashed active</span>
</button>
<button class="ro-btn ro-variant-dashed ro-shape-icon-circle ro-size-md-sm ro-color-scheme-product" aria-label="Add">
  <i class="ro-icon ro-icon-plus-small"></i>
</button>

Preview

DashedDashed active

Color Schemes

Use color scheme classes like .ro-color-scheme-product to change the button’s color. This is useful for aligning the button with a specific status or action type.

Core

Primary accent, destructive, and surface schemes: product, danger, black, white, inverted.

<button class="ro-btn ro-color-scheme-product">
  <span class="ro-btn-text">Product</span>
</button>
<button class="ro-btn ro-color-scheme-danger">
  <span class="ro-btn-text">Danger</span>
</button>
<button class="ro-btn ro-color-scheme-black">
  <span class="ro-btn-text">Black</span>
</button>
<button class="ro-btn ro-color-scheme-white">
  <span class="ro-btn-text">White</span>
</button>
<button class="ro-btn ro-color-scheme-inverted">
  <span class="ro-btn-text">Inverted</span>
</button>

Preview

ProductDangerBlackWhiteInverted

Vibrant

.ro-color-scheme-glass adds a frosted glass effect — show it on a textured or colorful background. .ro-color-scheme-ai applies the AI gradient; pair with .ro-variant-outlined for a gradient border.

<div class="ro-u-p-4 ro-u-radius-xl" style="background: var(--ro-gradients-ai);">
  <div class="ro-stack">
    <button class="ro-btn ro-color-scheme-glass">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-btn-text">Glass</span>
    </button>
    <button class="ro-btn ro-color-scheme-glass active">
      <i class="ro-icon ro-icon-rocket"></i>
      <span class="ro-btn-text">Glass active</span>
    </button>
  </div>
</div>
<button class="ro-btn ro-color-scheme-ai">
  <i class="ro-icon ro-icon-rocket"></i>
  <span class="ro-btn-text">AI</span>
</button>
<button class="ro-btn ro-color-scheme-ai ro-variant-outlined">
  <i class="ro-icon ro-icon-rocket"></i>
  <span class="ro-btn-text">AI outlined</span>
</button>

Preview

GlassGlass active

AIAI outlined

Icon Buttons

For buttons that only contain an icon, use .ro-shape-icon for a square button or .ro-shape-icon-circle for a circular one.

<button class="ro-btn ro-shape-icon" aria-label="Icon button">
  <i class="ro-icon ro-icon-ai-three-stars"></i>
</button>
<button class="ro-btn ro-shape-icon-circle" aria-label="Circular icon button">
  <i class="ro-icon ro-icon-fire-flame"></i>
</button>

Preview

Disabled

To disable a button, use the standard HTML disabled attribute.

<button class="ro-btn" disabled>Solid</button>
<button class="ro-btn ro-variant-outlined" disabled>Outlined</button>
<button class="ro-btn ro-variant-muted" disabled>Muted</button>
<button class="ro-btn ro-variant-ghost" disabled>Ghost</button>
<button class="ro-btn ro-variant-dashed" disabled>Dashed</button>
<button class="ro-btn ro-variant-muted-outlined" disabled>Muted-outlined</button>

Preview

Solid

Outlined

Muted

Ghost

Dashed

Muted-outlined

Button Groups

Group related buttons together using the .ro-btn-group class. All button variants and sizes work within groups.

<div class="ro-btn-group">
  <button class="ro-btn">
    Option 1
  </button>
  <button class="ro-btn ro-shape-icon">
    <i class="ro-icon ro-icon-chevron-bottom-small"></i>
  </button>
</div>
<div class="ro-btn-group ro-color-scheme-product ro-variant-outlined">
  <button class="ro-btn">
      Send later
  </button>
  <button class="ro-btn ro-shape-icon">
    <i class="ro-icon ro-icon-chevron-bottom-small"></i>
  </button>
</div>

Preview

Option 1

Send later

Properties

Button styles are controlled via CSS classes.

Class Pattern	Default	Description
ro-variant-*	solid	outlined, dashed, muted, ghost, link, muted-outlined, white, search. See Migration guide.
ro-color-scheme-*	neutral	product, danger, black, white, inverted, glass, ai. Sets the button’s color theme.
ro-size-*	md	xs, sm, md-sm, lg. Extra small and small buttons (xs, sm) require .ro-btn-text wrapper for text.
ro-shape-*	(none)	icon, icon-circle. Special styles for icon-only buttons.
ro-icon-right	(none)	Places icon, loader, or SVG after button text.
disabled	(none)	Disables the button.
[disabled="loading"], .ro-state-loading	(none)	Loading state; keeps spinner visible instead of disabled gray styling.
active	(none)	Styles the button as active.
.ro-btn-group	(none)	Group container; variant, color, and size modifiers cascade to child .ro-btn elements.

Group-level example: .ro-btn-group.ro-variant-outlined.ro-color-scheme-product.

For overlay dismiss controls, see .ro-overlay-close and .ro-popover-close in Close Button.