Button

Button base code

For the button to render properly use the following base html code.

Buckholt provides a base .btn class that defines fundamental styles, including padding and content alignment. By default, .btn elements have a transparent border and background colour, with no predefined focus or hover styles.

html

<button type="button" class="btn">
    <span class="button-label">Button label</span>    
</button>

Button variants

The .btn class is designed to be used alongside the three button variants. For the button variants add either .btn-primary .btn-secondary or .btn-ghost as the relevant class.

html

<button type="button" class="btn btn-primary">
    <span class="button-label">Primary</span>    
</button>

<button type="button" class="btn btn-secondary">
    <span class="button-label">Secondary</span>    
</button>

<button type="button" class="btn btn-ghost">
    <span class="button-label">Ghost</span>    
</button>

Size

Want larger or smaller buttons? Add .btn-lg for large buttons or .btn-sm for small ones.

html

<button type="button" class="btn btn-primary btn-sm">
    <span class="button-label">Small</span>    
</button>

<button type="button" class="btn btn-secondary btn-sm">
    <span class="button-label">Small</span>    
</button>

<button type="button" class="btn btn-ghost btn-sm">
    <span class="button-label">Small</span>    
</button>

html

<button type="button" class="btn btn-primary btn-lg">
    <span class="button-label">Large</span>    
</button>

<button type="button" class="btn btn-secondary btn-lg">
    <span class="button-label">Large</span>    
</button>

<button type="button" class="btn btn-ghost btn-lg">
    <span class="button-label">Large</span>    
</button>

Icons in buttons

Icons can be added to the left of the button label, simply by including <div class="btn-icon"></div> with the icon inside.

html

<button type="button" class="btn btn-primary">
    <div class="btn-icon">
        <i class="fa-regular fa-ghost"></i>
    </div>
    <span class="button-label">Button label</span>    
</button>

Icon-only buttons

Create icon-only buttons by including <div class="btn-icon"></div> with the icon, inside the parent .btn.

html

<button type="button" class="btn btn-primary">
    <div class="btn-icon">
        <i class="fa-regular fa-ghost"></i>
    </div>       
</button>

Rounded icon-only buttons

To change the icon-only buttons to rounded buttons add btn-round.

html

<button type="button" class="btn btn-primary btn-round">
    ...      
</button>

Button sets

When two or more related buttons are required to be grouped together place them within the .button-set class.

html

<div class="button-set">
    <button type="button" class="btn btn-primary">
        <span class="button-label">Accept all</span>    
    </button>
    <button type="button" class="btn btn-secondary">
        <span class="button-label">Customise</span>    
    </button>
    <button type="button" class="btn btn-ghost">
        <span class="button-label">Reject all</span>    
    </button>
</div>

Stacked buttons

Adding .button-set-stacked will cause the buttons to stack on top of each other and set their widths to 100%.

html

<div class="button-set button-set-stacked">
    <button type="button" class="btn btn-primary">
        <span class="button-label">Accept all</span>    
    </button>
    <button type="button" class="btn btn-secondary">
        <span class="button-label">Customise</span>    
    </button>
    <button type="button" class="btn btn-ghost">
        <span class="button-label">Reject all</span>    
    </button>
</div>

Disabled

To disable a button add the disabled attribute to the <button>.

html

<button type="button" class="btn btn-primary" disabled>
    <span class="button-label">Primary</span>    
</button>

<button type="button" class="btn btn-secondary" disabled>
    <span class="button-label">Secondary</span>    
</button>

<button type="button" class="btn btn-ghost" disabled>
    <span class="button-label">Ghost</span>    
</button>