Buttons

The button component supports multiple semantic colors and variants, using clean class compositions like btn primary, btn flat, btn outline, or btn link.

Default Style

Standard button with full background coloring and click/hover transformations.

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn alert">Alert</button>
<button class="btn info">Info</button>

Flat Button Style

Button with a flat appearance that hides backgrounds and borders by default, displaying a subtle highlight only on hover.

<button class="btn flat">Default Flat</button>
<button class="btn flat primary">Primary Flat</button>
<button class="btn flat success">Success Flat</button>

Outline Button Style

Button with transparent background, colored border, and matching text color.

<button class="btn outline">Default Outline</button>
<button class="btn outline primary">Primary Outline</button>
<button class="btn outline success">Success Outline</button>

Link Button Style

Button styled to look like a standard anchor link, showing text underline and color transitions on hover.

<button class="btn link">Link Button</button>

Button Sizes

Button heights can be customized with size classes: mini (20px), small (26px), medium (30px), default (36px), and large (54px).

<button class="btn primary mini">Mini (20px)</button>
<button class="btn primary small">Small (26px)</button>
<button class="btn primary medium">Medium (30px)</button>
<button class="btn primary">Default (36px)</button>
<button class="btn primary large">Large (54px)</button>

Buttons with Icons

Buttons support inline icons (such as developer emojis) which automatically align using flex layout and spacing gaps.

<!-- Icon Before Text -->
<button class="btn primary">🏠 Home</button>
<button class="btn success">💾 Save</button>

<!-- Icon After Text -->
<button class="btn secondary">Next ➡️</button>

<!-- Icon Only -->
<button class="btn alert" title="Delete">🗑️</button>

Button Groups

Groups a series of buttons together on a single line. The borders automatically overlap and the corner margins collapse cleanly.

Basic Button Group

Mixed Colored Group

Sizing Variations (.btn-group-lg, default, .btn-group-sm)

Vertical Button Group

<!-- Basic Button Group -->
<div class="btn-group">
    <button class="btn secondary">Left</button>
    <button class="btn secondary">Middle</button>
    <button class="btn secondary">Right</button>
</div>

<!-- Button Group Sizing (Large) -->
<div class="btn-group btn-group-lg">
    <button class="btn primary">Left</button>
    <button class="btn primary">Middle</button>
    <button class="btn primary">Right</button>
</div>

<!-- Vertical Button Group -->
<div class="btn-group-vertical">
    <button class="btn primary">Top Item</button>
    <button class="btn primary">Middle Item</button>
    <button class="btn primary">Bottom Item</button>
</div>

Usage Reference

Combine these classes on standard <button> or <a> elements to style buttons in FrankUI.

Feature	Class Composition	Usage Description
Base Button	.btn	Applies base button box styling, transitions, hover scales, and margins.
Semantic Colors	.primary / .secondary / .success .warning / .alert / .info	Applies semantic colored backgrounds (or text borders for outlines/flat buttons).
Visual Variants	.flat / .outline / .link	Flat: Transparent background, fills on hover. Outline: Transparent background, borders styled to match, fills on hover. Link: Looks like a hyperlink, underlines on hover.
Sizing Scales	.mini / .small / .medium / .large	Modifies button height, padding, and font sizes (default is 36px/medium).
Button Groups	.btn-group / .btn-group-vertical	Wraps multiple buttons to align them inline (horizontally or vertically) with joint borders.