Buttons - Quick Start Guide

2-Minute Setup

1 Include CSS Files

2 Add a Button

✓ Done! Your button is ready with hover states, focus indicators, and accessibility built-in.

Quick Reference

Button Variants

Class	Color	Use Case
`.btn-success`	● Green	Primary actions, save, submit, confirm
`.btn-danger`	● Red	Destructive actions, delete, remove, cancel
`.btn-warning`	● Yellow	Caution actions, warnings, proceed with care
`.btn-info`	● Cyan	Informational actions, details, learn more
`.btn-default`	● Gray	Secondary actions, neutral, cancel (non-destructive)

Size Modifiers

Class	Padding	Font Size	Use Case
`.btn-small`	0.25rem × 0.5rem	0.875rem (14px)	Toolbars, compact UIs, dense layouts
(default)	0.5rem × 1rem	1rem (16px)	Forms, modals, general use
`.btn-large`	0.75rem × 1.5rem	1.25rem (20px)	Hero sections, CTAs, emphasis

Button Wrapper Classes

Class	Effect
`.btn-wrapper`	Container for button groups (centered by default)
`.btn-wrapper-left`	Left-align buttons within wrapper
`.btn-wrapper-right`	Right-align buttons within wrapper
`.btn-wrapper-line`	Add top border to button group

HTML Structure

Basic Button (Required)

Every button must have the base .btn class plus a variant class.

Button with Icon

Add FontAwesome icons for visual context.

Icon-Only Button

Always include aria-label for accessibility.

Disabled Button

Use the disabled attribute to prevent interaction.

Link Button

Use <a> tags for navigation, <button> for actions.


Documentation

Button Groups

Use .btn-wrapper to group related buttons with consistent spacing and alignment.

Centered Button Group (Default)

Left-Aligned Button Group

Right-Aligned with Border

Note: Button wrappers automatically add 20px spacing between buttons and 20px padding top/bottom. The .btn-wrapper-line class adds a 1px top border.

Common Patterns

1. Form Actions

Standard form submit/cancel pattern

2. Destructive Confirmation

Dangerous action with clear visual hierarchy

3. Card Actions

Full-width button in card layout

4. Toolbar

Compact icon buttons for editor toolbars

Accessibility & Best Practices

Built-in Accessibility Features

Focus Indicators: Visible outline for keyboard navigation (browser default)
Hover States: Smooth opacity transition (0.8) provides visual feedback
Disabled State: Reduced opacity (default browser behavior) and proper cursor
Semantic HTML: Use <button> for actions, <a> for navigation
Color Contrast: All button variants meet WCAG AA standards for text contrast

ARIA Labels for Icon-Only Buttons

Screen readers need text to announce button purpose. Always include aria-label for icon-only buttons:

Keyboard Navigation

Tab: Move focus to next button
Shift + Tab: Move focus to previous button
Enter or Space: Activate focused button

Pro Tip: Test your buttons using only keyboard navigation. All interactive elements should be reachable and operable without a mouse.

Integration with RSL Layouts

Buttons work seamlessly with RSL's grid system and utility classes.

Responsive Button Grid

Centered Button with Utility Classes

Pro Tips

✨ Tip 1: Use .btn-success for primary actions and .btn-default for secondary actions to establish visual hierarchy

✨ Tip 2: Reserve .btn-danger exclusively for destructive actions like delete/remove to avoid confusion

✨ Tip 3: Combine button sizes with RSL density modes for responsive spacing: small buttons work well in compact density

✨ Tip 4: Button wrappers handle spacing automatically—no need to add margins to individual buttons

✨ Tip 5: Use type="button" for buttons inside forms to prevent accidental form submission

⚠ Remember: Don't use .btn class alone—always combine with a variant class (.btn-success, .btn-default, etc.)

Troubleshooting

Button Not Styled?

Check: buttons.css is loaded
Check: Both .btn and variant class are present (e.g., class="btn btn-success")
Check: No CSS conflicts with other frameworks

Hover Not Working?

Check: Button doesn't have disabled attribute
Check: No CSS overriding .btn:hover styles

Icon Not Showing?

Check: FontAwesome script is loaded
Check: Correct icon class (e.g., fas fa-check, not fa-check alone)
Check: Icon is inside the button element

Button Wrapper Not Centering?

Check: Using .btn-wrapper class (not .btn-wrapper-left or .btn-wrapper-right)
Check: Buttons are direct children of .btn-wrapper

CSS Properties Reference

Button Base Styles

Property	Value
Display	inline-block
Padding	0.5rem 1rem (default)
Border	1px solid (matches background color)
Border Radius	4px
Font Size	1rem (default)
Transition	all 0.2s ease
Hover Opacity	0.8

Customization: Override these styles with your own CSS by targeting the specific button classes with higher specificity.

Next Steps

See Examples

View buttons.html for realistic use cases

Copy Templates

Use playground.html as a starting point

Explore More

Learn about RSL Grid System for responsive layouts