### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Buttons

### 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.

Button
Button

          <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`.

Primary Info Success Warning Danger Light 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.

Primary Info Success Warning Danger

          <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.

Primary Info Success Warning Danger

          <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.

Primary Info Success Warning Danger

          <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.

Button Button Button Button Button Button

          <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.

Primary Info Success Warning Danger

          <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.

Button
Button

          <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>