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

Sizing

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

<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

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-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

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.

<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

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-muted-outlined" disabled>Muted-outlined</button>

Preview

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

Properties

Button styles are controlled via CSS classes.

Class Pattern	Default	Description
`ro-variant-*`	solid	`outlined`, `muted`, `ghost`, `link`, `muted-outlined`. Controls the button’s visual style.
`ro-color-scheme-*`	neutral	`product`, `danger`, `black`, `white`, `inverted`. Sets the button’s color theme.
`ro-size-*`	md	`sm`, `lg`. Controls button size. Small buttons (`sm`) require `.ro-btn-text` wrapper for text.
`ro-shape-*`	(none)	`icon`, `icon-circle`. Special styles for icon-only buttons.
`disabled`	(none)	Disables the button
`active`	(none)	Styles the button as active