Buttons Examples

Live examples and demonstrations

RSL Buttons

RSL Buttons provide a simple, accessible button system with contextual color variants, multiple sizes, icon support, and flexible layout options. All buttons include hover states, focus indicators, and work seamlessly with RSL's grid system and density modes.

New to RSL Buttons?

Get up and running in 2 minutes with our Quick Start Guide!

View Quick Start Guide
Button Classes
.btn — Base button class (required)
.btn-success — Green button for successful/positive actions
.btn-danger — Red button for destructive/delete actions
.btn-warning — Yellow button for caution actions
.btn-info — Cyan button for informational actions
.btn-default — Gray button for neutral actions

Size Modifiers
.btn-small — Compact button (0.25rem × 0.5rem padding)
.btn-large — Large button (0.75rem × 1.5rem padding)
Default — Regular button (0.5rem × 1rem padding)

Button Wrapper Classes
.btn-wrapper — Container for button groups (centered by default)
.btn-wrapper-left — Left-align buttons
.btn-wrapper-right — Right-align buttons
.btn-wrapper-line — Add top border to button group

ADA Features
• Focus visible outline for keyboard navigation
• Hover state with smooth opacity transition
• Disabled state with proper cursor styling
• ARIA labels recommended for icon-only buttons

Download RSL Example Pack

Button Variants

Use contextual button colors to communicate action intent to users.

Code • HTML

Button Sizes

Choose from three button sizes to match your UI density and hierarchy.

Compact UI, toolbars

Default size for forms

Emphasis, CTAs, hero sections

Code • HTML

Buttons with Icons

Add FontAwesome icons to provide visual context for button actions.

Code • HTML

Icon-Only Buttons

Perfect for toolbars and compact interfaces. Always include aria-label for accessibility.

Code • HTML

Disabled State

Use the disabled attribute to prevent interaction. Disabled buttons automatically show reduced opacity and a not-allowed cursor.

Code • HTML

Button Groups (Wrappers)

Use .btn-wrapper to group related buttons with flexible alignment options.

Centered (Default)

Left-Aligned

Right-Aligned

With Top Border

Code • HTML

Buttons in Context: Form Actions

Common form button pattern with primary and secondary actions.

Create New Account

Code • HTML

Buttons in Context: Card Actions

Button patterns for card-based layouts.

Basic Plan

$9/month

Perfect for individuals getting started.

Pro Plan Popular

$29/month

For growing teams and businesses.

Enterprise

Custom

Advanced features and support.

Code • HTML

Buttons in Context: Hero Call-to-Action

Large, prominent buttons for landing pages and hero sections.

Build Better Layouts

RSL makes responsive design simple and accessible.

Code • HTML

Buttons in Context: Toolbar

Compact icon buttons for toolbars and action menus.

Code • HTML

Link Buttons

Use <a> tags with button classes for navigation actions.

Documentation
Download
Back to Home
Code • HTML


     Documentation


     Download

Accessibility & Best Practices

✓ Built-in Accessibility Features

  • Focus Indicators: Visible focus outline for keyboard navigation
  • Hover States: Smooth opacity transition on hover (0.8 opacity)
  • Disabled State: Proper cursor styling and visual feedback
  • Color Contrast: All button variants meet WCAG AA standards

Pro Tips

  • Always use aria-label for icon-only buttons
  • Use .btn-success for primary actions, .btn-default for secondary
  • Use .btn-danger for destructive actions (delete, remove)
  • Combine with RSL grid classes for responsive button layouts
  • Button wrappers automatically add 20px spacing between buttons
  • Use <button> for actions, <a> for navigation