Ralma

This Ractive plugin provides helper shortcuts for most Bulma widgets.

Button

The classic button, in different colors, sizes, and states

Colors Yes

Sizes Yes

The button is an essential element of any design. It's meant to look and behave as an interactive element of your page.

Button

				
					<button>Button</button>

Colors

White Light Dark Black Text

				
					<button white>White</button>
<button light>White</button>
<button dark>White</button>
<button black>White</button>
<button text>White</button>

Primary Link Info Success Warning Danger

				
					<button primary>Primary</button>
<button link>Link</button>
<button info>Info</button>
<button success>Success</button>
<button warning>Warning</button>
<button danger>Danger</button>

Sizes

Small Normal Medium Large

				
					<button small>Small</button>
<button normal>Normal</button>
<button medium>Medium</button>
<button large>Large</button>

Styles

Outlined

Outlined Outlined Outlined Outlined Outlined Outlined

				
					<button outlined>Outlined</button>
<button primary outlined>Outlined</button>
<button link outlined>Outlined</button>
<button info outlined>Outlined</button>
<button success outlined>Outlined</button>
<button danger outlined>Outlined</button>

Inverted (the text color becomes the background color, and vice-versa)

Inverted Inverted Inverted Inverted Inverted

<button primary inverted>Outlined</button>
<button link inverted>Outlined</button>
<button info inverted>Outlined</button>
<button success inverted>Outlined</button>
<button danger inverted>Outlined</button>

Invert Outlined (the invert color becomes the text and border colors)

Invert Outlined Invert Outlined Invert Outlined Invert Outlined Invert Outlined

<button primary inverted outlined>Invert Outlined</button>
<button link inverted outlined>Invert Outlined</button>
<button info inverted outlined>Invert Outlined</button>
<button success inverted outlined>Invert Outlined</button>
<button danger inverted outlined>Invert Outlined</button>

Rounded buttons

Rounded Rounded Rounded Rounded Rounded Rounded

<button rounded>Rounded</button>
<button primary rounded>Rounded</button>
<button link rounded>Rounded</button>
<button info rounded>Rounded</button>
<button success rounded>Rounded</button>
<button danger rounded>Rounded</button>

States #

Normal

Normal Normal Normal Normal Normal Normal Normal

				
					<button primary>Normal</button>
<button link>Normal</button>
<button info>Normal</button>
<button success>Normal</button>
<button danger>Normal</button>

Hover

Hover Hover Hover Hover Hover Hover Hover

				
					<button hovered>Hover</button>
<button primary hovered>Hover</button>
<button link hovered>Hover</button>
<button info hovered>Hover</button>
<button success hovered>Hover</button>
<button danger hovered>Hover</button>

Focus

Focus Focus Focus Focus Focus Focus Focus

				
					<button focused>Focus</button>
<button primary focused>Focus</button>
<button link focused>Focus</button>
<button info focused>Focus</button>
<button success focused>Focus</button>
<button danger focused>Focus</button>

Active

Active Active Active Active Active Active Active

				
					<button active>Active</button>
<button primary active>Active</button>
<button link active>Active</button>
<button info active>Active</button>
<button success active>Active</button>
<button danger active>Active</button>

Loading

Loading Loading Loading Loading Loading Loading Loading

Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element.

<button loading>Loading</button>
<button primary loading>Loading</button>
<button link loading>Loading</button>
<button info loading>Loading</button>
<button succes loading>Loading</button>
<button danger loading>Loading</button>

Disabled

Disabled Disabled Disabled Disabled Disabled Disabled Disabled

The is-disabled CSS class has been deprecated in favor of the disabled HTML attribute. Learn more

<button disabled>Disabled</button>
<button primary disabled>Disabled</button>
<button link disabled>Disabled</button>
<button info disabled>Disabled</button>
<button success disabled>Disabled</button>
<button warning disabled>Disabled</button>
<button danger disabled>Disabled</button>

With Font Awesome icons

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub

<p class="buttons">
 <button>
  <span class="icon is-small">
   <i class="fas fa-bold"></i>
  </span>
 </button>
 <button>
  <span class="icon is-small">
   <i class="fas fa-italic"></i>
  </span>
 </button>
 <button>
  <span class="icon is-small">
   <i class="fas fa-underline"></i>
  </span>
 </button>
</p>

<p class="buttons">
 <button>
  <span class="icon">
   <i class="fab fa-github"></i>
  </span>
  <span>GitHub</span>
 </button>

 <button primary>
  <span class="icon">
   <i class="fab fa-twitter"></i>
  </span>
  <span>Twitter</span>
 </button>
 <button success>
  <span class="icon is-small">
   <i class="fas fa-check"></i>
  </span>
  <span>Save</span>
 </button>
 <button danger outlined>
  <span>Delete</span>
  <span class="icon is-small">
   <i class="fas fa-times"></i>
  </span>
 </button>
</p>

<p class="buttons">
 <button small>
  <span class="icon is-small">
   <i class="fab fa-github"></i>
  </span>
  <span>GitHub</span>
 </button>
 <button>
  <span class="icon">
   <i class="fab fa-github"></i>
  </span>
  <span>GitHub</span>
 </button>
 <button medium>
  <span class="icon">
   <i class="fab fa-github"></i>
  </span>
  <span>GitHub</span>
 </button>
 <button large>
  <span class="icon is-medium">
   <i class="fab fa-github"></i>
  </span>
  <span>GitHub</span>
 </button>
</p>

If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon.


<p class="buttons">
 <button small>
  <span class="icon is-small">
   <i class="fas fa-heading"></i>
  </span>
 </button>
</p>

<p class="buttons">
 <button>
  <span class="icon is-small">
   <i class="fas fa-heading"></i>
  </span>
 </button>
 <button>
  <span class="icon">
   <i class="fas fa-heading fa-lg"></i>
  </span>
 </button>
</p>

<p class="buttons">
 <button medium>
  <span class="icon is-small">
   <i class="fas fa-heading"></i>
  </span>
 </button>
 <button medium>
  <span class="icon">
   <i class="fas fa-heading fa-lg"></i>
  </span>
 </button>
 <button medium>
  <span class="icon is-medium">
   <i class="fas fa-heading fa-2x"></i>
  </span>
 </button>
</p>

<p class="buttons">
 <button large>
  <span class="icon is-small">
   <i class="fas fa-heading"></i>
  </span>
 </button>
 <button large>
  <span class="icon">
   <i class="fas fa-heading fa-lg"></i>
  </span>
 </button>
 <button large>
  <span class="icon is-medium">
   <i class="fas fa-heading fa-2x"></i>
  </span>
 </button>
</p>

Designed with by Aldi Duzha