Buttons

Versatile button components for actions, navigation, and forms throughout your application.

Default Buttons

Nimbus provides a wide range of button color variants. Each variant uses semantic color tokens for consistent theming.

Primary

HTML

<button class="hu-btn hu-btn-primary">Primary</button>

Secondary

HTML

<button class="hu-btn hu-btn-secondary">Secondary</button>

Success

HTML

<button class="hu-btn hu-btn-success">Success</button>

Danger

HTML

<button class="hu-btn hu-btn-danger">Danger</button>

Warning

HTML

<button class="hu-btn hu-btn-warning">Warning</button>

Info

HTML

<button class="hu-btn hu-btn-info">Info</button>

Outline

HTML

<button class="hu-btn hu-btn-outline">Outline</button>

Outline Primary

HTML

<button class="hu-btn hu-btn-outline-primary">Outline Primary</button>

Outline Success

HTML

<button class="hu-btn hu-btn-outline-success">Outline Success</button>

Outline Danger

HTML

<button class="hu-btn hu-btn-outline-danger">Outline Danger</button>

Ghost

HTML

<button class="hu-btn hu-btn-ghost">Ghost</button>

Link

HTML

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

All Variants

HTML

<button class="hu-btn hu-btn-primary">Primary</button>
<button class="hu-btn hu-btn-secondary">Secondary</button>
<button class="hu-btn hu-btn-success">Success</button>
<button class="hu-btn hu-btn-danger">Danger</button>
<button class="hu-btn hu-btn-warning">Warning</button>
<button class="hu-btn hu-btn-info">Info</button>
<button class="hu-btn hu-btn-outline">Outline</button>
<button class="hu-btn hu-btn-outline-primary">Outline Primary</button>
<button class="hu-btn hu-btn-outline-success">Outline Success</button>
<button class="hu-btn hu-btn-outline-danger">Outline Danger</button>
<button class="hu-btn hu-btn-ghost">Ghost</button>
<button class="hu-btn hu-btn-link">Link</button>

Button Sizes

Five size modifiers are available to fit different contexts: from compact inline actions to prominent call-to-action buttons.

Sizes

HTML

<button class="hu-btn hu-btn-primary hu-btn-xs">Extra Small</button>
<button class="hu-btn hu-btn-primary hu-btn-sm">Small</button>
<button class="hu-btn hu-btn-primary hu-btn-md">Medium (Default)</button>
<button class="hu-btn hu-btn-primary hu-btn-lg">Large</button>
<button class="hu-btn hu-btn-primary hu-btn-xl">Extra Large</button>

Disabled State

Use the disabled attribute or the .hu-btn-disabled class to prevent user interaction. Disabled buttons have reduced opacity and a not-allowed cursor.

Disabled Buttons

HTML

<button class="hu-btn hu-btn-primary" disabled>Primary</button>

<!-- Or use the class -->
<button class="hu-btn hu-btn-secondary hu-btn-disabled">Secondary</button>

Loading State

Add the .hu-btn-loading class to show a spinning animation. The button text becomes transparent and a spinner appears in its place.

Loading Buttons

HTML

<button class="hu-btn hu-btn-primary hu-btn-loading">Loading</button>

Block Button

Use the .hu-btn-block modifier to make a button span the full width of its parent container.

Block Buttons

HTML

<button class="hu-btn hu-btn-primary hu-btn-block">Full Width Primary</button>

Icon Buttons

Use the .hu-btn-icon class for square buttons containing only an icon. Works with any variant and size.

Icon Buttons

HTML

<button class="hu-btn hu-btn-primary hu-btn-icon" aria-label="Settings">
    <svg>...settings icon...</svg>
</button>

<button class="hu-btn hu-btn-outline hu-btn-icon" aria-label="Add">
    <svg>...plus icon...</svg>
</button>

<button class="hu-btn hu-btn-ghost hu-btn-icon" aria-label="Delete">
    <svg>...trash icon...</svg>
</button>

Button Groups

Wrap buttons in a .hu-btn-group container to visually connect them with shared borders and aligned edges.

Button Groups

HTML

<div class="hu-btn-group">
    <button class="hu-btn hu-btn-outline">Left</button>
    <button class="hu-btn hu-btn-outline">Center</button>
    <button class="hu-btn hu-btn-outline">Right</button>
</div>

Colored Button Group

HTML

<div class="hu-btn-group">
    <button class="hu-btn hu-btn-primary">1</button>
    <button class="hu-btn hu-btn-primary">2</button>
    <button class="hu-btn hu-btn-primary">3</button>
</div>

Real-World Examples

Common button patterns used in dashboards and admin panels and client-facing pages.

Order CTA Buttons

HTML

<button class="hu-btn hu-btn-primary hu-btn-lg">Get Started Now</button>
<button class="hu-btn hu-btn-outline hu-btn-lg">Learn More</button>

Server Control Buttons

HTML

<button class="hu-btn hu-btn-success">
    <svg>...check icon...</svg>
    Start Server
</button>
<button class="hu-btn hu-btn-warning">
    <svg>...refresh icon...</svg>
    Restart Server
</button>
<button class="hu-btn hu-btn-danger">
    <svg>...stop icon...</svg>
    Stop Server
</button>

Domain Search Input Group

HTML

<div class="hu-input-group">
    <input type="text" class="hu-form-control" placeholder="Enter your domain name">
    <button class="hu-btn hu-btn-primary">Search</button>
</div>

API Reference

Complete list of CSS classes available for buttons.

Class	Description
`.hu-btn`	Base button class. Apply to any `<button>` or `<a>` element.
`.hu-btn-primary`	Primary filled button with brand color.
`.hu-btn-secondary`	Secondary filled button with neutral color.
`.hu-btn-success`	Success filled button with green color.
`.hu-btn-danger`	Danger filled button with red color.
`.hu-btn-warning`	Warning filled button with amber color.
`.hu-btn-info`	Info filled button with blue color.
`.hu-btn-outline`	Outline button with transparent background.
`.hu-btn-outline-primary`	Outline button with primary border and text.
`.hu-btn-outline-success`	Outline button with success border and text.
`.hu-btn-outline-danger`	Outline button with danger border and text.
`.hu-btn-ghost`	Ghost button with transparent background and border.
`.hu-btn-link`	Link-styled button that looks like a text link.
`.hu-btn-xs`	Extra small button size.
`.hu-btn-sm`	Small button size.
`.hu-btn-md`	Medium (default) button size.
`.hu-btn-lg`	Large button size.
`.hu-btn-xl`	Extra large button size.
`.hu-btn-icon`	Square button for icon-only content.
`.hu-btn-block`	Full-width button that fills its container.
`.hu-btn-loading`	Shows a spinner animation and hides button text.
`.hu-btn-disabled`	Disables the button (alternative to `disabled` attribute).
`.hu-btn-group`	Container to group buttons together with shared borders.