H-Button
Huro provides it's own subset of Bulma buttons. Use the h-button class with a Bulma native button class to start using Huro buttons. Basic modifiers such as is-bold and is-rounded are available.
<a class="button h-button">Button</a>
<button class="button h-button is-bold">Button</button>
<a class="button h-button is-rounded">Button</a>
<button class="button h-button is-rounded is-bold">Button</button>
Solid Colors
Huro buttons can have solid colors. You can use the same classes that are offered by the Bulma Framework. Available color classes are is-primary, is-info, is-success, is-warning, is-danger, is-light, is-white.
<a class="button h-button is-primary">Primary</a>
<a class="button h-button is-info">Info</a>
<a class="button h-button is-success">Success</a>
<a class="button h-button is-warning">Warning</a>
<a class="button h-button is-danger">Danger</a>
<a class="button h-button is-light">Light</a>
<a class="button h-button is-white">White</a>
Light Colors
Solid buttons are available in lighter versions. Simply use the same markup that we have for solid buttons and add the is-light modifier class.
<a class="button h-button is-primary is-light">Primary</a>
<a class="button h-button is-info is-light">Info</a>
<a class="button h-button is-success is-light">Success</a>
<a class="button h-button is-warning is-light">Warning</a>
<a class="button h-button is-danger is-light">Danger</a>
Outlined Colors
Huro Buttons can be outlined. Simply use the same markup that we have for solid buttons and add the is-outlined modifier class.
<a class="button h-button is-primary is-outlined">Primary</a>
<a class="button h-button is-info is-outlined">Info</a>
<a class="button h-button is-success is-outlined">Success</a>
<a class="button h-button is-warning is-outlined">Warning</a>
<a class="button h-button is-danger is-outlined">Danger</a>
Elevation
Huro buttons can handle elevation. For a hover triggered elevation, add the is-raised modifier class. For a permanent elevation, add the is-elevated modifier class.
<a class="button h-button is-primary is-raised">Primary</a>
<a class="button h-button is-info is-raised">Info</a>
<a class="button h-button is-success is-raised">Success</a>
<a class="button h-button is-warning is-elevated">Warning</a>
<a class="button h-button is-danger is-elevated">Danger</a>
Loading
Huro buttons can be shown in a loading state. To show a loading spinner, add the is-loading modifier class.
<a class="button h-button is-loading">Button</a>
<a class="button h-button is-primary is-loading">Button</a>
<a class="button h-button is-info is-loading">Button</a>
<a class="button h-button is-success is-loading is-rounded">Button</a>
<a class="button h-button is-warning is-loading is-rounded">Button</a>
<a class="button h-button is-danger is-loading is-rounded">Button</a>
Disabled
Huro buttons can be shown in a disabled state. To show a disabled button, add the disabled html attribute to the target button element.
<a class="button h-button is-primary is-disabled">Primary</a>
<a class="button h-button is-info is-disabled">Info</a>
<a class="button h-button is-success is-disabled">Success</a>
<a class="button h-button is-warning is-disabled">Warning</a>
<a class="button h-button is-danger is-disabled">Danger</a>
Font Awesome
Huro buttons work well with Font Awesome Icons. Add an icon element inside the button to handle icons. You can also create square and circle buttons with a single icon. Please refer to markup for detailed examples.
<button class="button h-button is-primary is-elevated">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>Tweet Now</span>
</button>
<button class="button h-button is-success is-rounded is-elevated">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>Save Changes</span>
</button>
<button class="button">
<span class="icon is-small">
<i class="fab fa-twitter"></i>
</span>
</button>
<button class="button is-primary is-circle is-elevated">
<span class="icon is-small">
<i class="fab fa-linkedin-in"></i>
</span>
</button>
Feather Icons
Huro buttons work well with Feather Icons. Add an icon element inside the button to handle icons. You can also create square and circle buttons with a single icon. Please refer to markup for detailed examples.
<button class="button h-button is-primary is-elevated">
<span class="icon">
<i data-feather="twitter"></i>
</span>
<span>Tweet Now</span>
</button>
<button class="button h-button is-danger is-rounded is-elevated">
<span class="icon">
<i data-feather="gitlab"></i>
</span>
<span>Commit Code</span>
</button>
<button class="button">
<span class="icon is-small">
<i data-feather="mail"></i>
</span>
</button>
<button class="button is-primary is-circle is-elevated">
<span class="icon is-small">
<i data-feather="message-square"></i>
</span>
</button>
Button Group
You can easily align buttons and group them together by wrapping them inside a buttons element. You can mix any button styles.
<div class="buttons">
<button class="button h-button">
<span class="icon">
<i data-feather="eye"></i>
</span>
<span>View</span>
</button>
<button class="button h-button">
<span class="icon">
<i data-feather="edit-2"></i>
</span>
<span>Edit</span>
</button>
<button class="button h-button is-success is-elevated">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>Approve</span>
</button>
</div>
Addons
Huro buttons can be grouped together in an addon styled block of buttons. This makes creating conmplex interfaces much more easier. Refer to markup for a detailed example.
<div class="field has-addons">
<p class="control">
<button class="button h-button">
<span class="icon is-small">
<i class="fas fa-align-left"></i>
</span>
<span>Left</span>
</button>
</p>
<p class="control">
<button class="button h-button">
<span class="icon is-small">
<i class="fas fa-align-center"></i>
</span>
<span>Center</span>
</button>
</p>
<p class="control">
<button class="button h-button">
<span class="icon is-small">
<i class="fas fa-align-right"></i>
</span>
<span>Right</span>
</button>
</p>
</div>
H-Action
Huro also provides a simple button called h-action. it doesn't come up with a lot of modifiers like the H Button but is a solid alternative when you want to use simple buttons.
<a class="button h-action">Button</a>
<button class="button h-action is-rounded">Button</button>
<a class="button h-action is-hoverable">Button</a>
<button class="button h-action is-grey">Button</button>