Wrap multiple buttons in a <p class="buttons"> wrapper for automatic alignment and spacing.
Default States
Default buttons use the .button and .is-rounded classes.
Alternate Styles & States
Use the .is-outlined class for an alternate style, for example for cancel or escape actions. Use the disabled attribute to indicate a function is not current available. Use the .is-text class (with optional icon) to create button that looks like a text link, but maintains button padding and spacing.
Default
Outlined
Default - Disabled Help
Each state is available as a pseudo-class and a CSS class:
:hoverand.is-hovered:focusand.is-focused:activeand.is-active
This allows you to obtain the style of a certain state without having to trigger it. Use dev tools to simulate pseudo classes on the default button.
Default States
<a href="" class="button is-rounded">Anchor</a>
<button class="button is-rounded">Button</button>
<input class="button is-rounded" type="submit" value="Submit input">
<input class="button is-rounded" type="reset" value="Reset input">
Alternate States & Styles
<a href="" class="button is-rounded">Default</a>
<a href="" class="button is-rounded is-outlined">Outlined</a>
<a href="" class="button is-rounded" disabled>Default - Disabled</a>
<a href="" class="button is-text">
<span>Help</span>
<span class="icon is-small">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M17 10c0-3.87-3.14-7-7-7c-3.87 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7zm-6.3 1.48H9.14v-.43c0-.38.08-.7.24-.98s.46-.57.88-.89c.41-.29.68-.53.81-.71c.14-.18.2-.39.2-.62c0-.25-.09-.44-.28-.58c-.19-.13-.45-.19-.79-.19c-.58 0-1.25.19-2 .57l-.64-1.28c.87-.49 1.8-.74 2.77-.74c.81 0 1.45.2 1.92.58c.48.39.71.91.71 1.55c0 .43-.09.8-.29 1.11c-.19.32-.57.67-1.11 1.06c-.38.28-.61.49-.71.63c-.1.15-.15.34-.15.57v.35zm-1.47 2.74c-.18-.17-.27-.42-.27-.73c0-.33.08-.58.26-.75s.43-.25.77-.25c.32 0 .57.09.75.26s.27.42.27.74c0 .3-.09.55-.27.72c-.18.18-.43.27-.75.27c-.33 0-.58-.09-.76-.26z" fill="#626262"/></svg>
</span>
</a>
<a href="" class="button is-rounded">Default</a>
<a href="" class="button is-rounded is-hovered">Hovered</a>
<a href="" class="button is-rounded is-focused">Focused</a>
<a href="" class="button is-rounded is-active">Active</a>
<a href="" class="button is-rounded is-outlined">Default</a>
<a href="" class="button is-rounded is-outlined is-hovered">Hovered</a>
<a href="" class="button is-rounded is-outlined is-focused">Focused</a>
<a href="" class="button is-rounded is-outlined is-active">Active</a>
Tabs
Tabs support a variety of formatting options which are documented on the Bulma website. This is a basic example.
This markup describes the visual layout only, not the interactive component. Bring your own JavaScript.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
<div class="tabs-container">
<nav class="tabs is-boxed">
<ul>
<li class="is-active">
<a href="#pictures">Pictures</a>
</li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</nav>
<section class="tab-content">
<div class="tab-item" id="pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
</div>
<div class="tab-item" hidden>
</div>
</section>
</div>
Icons
Icons are specially classed inline SVG files. We recommend SVGOMG or an automated build process to optimize SVGs before they are added to the markup.
Icons can be included in buttons, form fields, menus, alerts & notifications. The SVG should also include the fill="currentColor" attribute to inherit the parent container's color.
You can also affect the icon's color directly by using color helper classes or styling the parent container.
Basic Examples
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 511.999"><path d="M508.874 478.708L360.142 329.976c28.21-34.827 45.191-79.103 45.191-127.309C405.333 90.917 314.416 0 202.666 0S0 90.917 0 202.667s90.917 202.667 202.667 202.667c48.206 0 92.482-16.982 127.309-45.191l148.732 148.732c4.167 4.165 10.919 4.165 15.086 0l15.081-15.082c4.165-4.166 4.165-10.92-.001-15.085zM202.667 362.667c-88.229 0-160-71.771-160-160s71.771-160 160-160 160 71.771 160 160-71.771 160-160 160z"/></svg>
</span>
<span class="icon has-text-success">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M504.502 75.496c-9.997-9.998-26.205-9.998-36.204 0L161.594 382.203 43.702 264.311c-9.997-9.998-26.205-9.997-36.204 0-9.998 9.997-9.998 26.205 0 36.203l135.994 135.992c9.994 9.997 26.214 9.99 36.204 0L504.502 111.7c9.998-9.997 9.997-26.206 0-36.204z"/></svg>
</span>
<span class="icon has-text-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32"><path d="M24 6.606h-4.57c-.54 0-1.144.71-1.144 1.662v3.3H24v4.703h-5.714V30.4H12.89V16.272H8v-4.706h4.89V8.8c0-3.97 2.756-7.2 6.54-7.2H24v5.005z"/></svg>
</span>
<span class="icon has-text-danger">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"viewBox="0 0 512 512"><path d="M352 0H160C71.648 0 0 71.648 0 160v192c0 88.352 71.648 160 160 160h192c88.352 0 160-71.648 160-160V160C512 71.648 440.352 0 352 0zm112 352c0 61.76-50.24 112-112 112H160c-61.76 0-112-50.24-112-112V160C48 98.24 98.24 48 160 48h192c61.76 0 112 50.24 112 112v192z"/><path d="M256 128c-70.688 0-128 57.312-128 128s57.312 128 128 128 128-57.312 128-128-57.312-128-128-128zm0 208c-44.096 0-80-35.904-80-80 0-44.128 35.904-80 80-80s80 35.872 80 80c0 44.096-35.904 80-80 80z"/><circle cx="393.6" cy="118.4" r="17.056"/></svg>
</span>
<span class="icon has-text-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.72 6.87c-1.085.48-2.248.804-3.47.95 1.248-.746 2.206-1.93 2.656-3.34-1.166.69-2.46 1.195-3.834 1.466C24.97 4.772 23.4 4.04 21.662 4.04c-3.336 0-6.04 2.703-6.04 6.037 0 .474.053.934.157 1.376-5.02-.25-9.47-2.656-12.45-6.31-.52.89-.82 1.93-.82 3.037 0 2.096 1.067 3.944 2.688 5.027-.99-.032-1.922-.302-2.736-.755v.075c0 2.926 2.083 5.366 4.845 5.923-.506.138-1.04.21-1.592.21-.39 0-.766-.036-1.136-.106.767 2.4 3 4.146 5.64 4.194-2.066 1.62-4.67 2.586-7.5 2.586-.488 0-.968-.03-1.44-.085 2.672 1.713 5.846 2.713 9.26 2.713 11.108 0 17.183-9.203 17.183-17.186 0-.26-.005-.522-.018-.78 1.18-.852 2.203-1.916 3.014-3.127z"/></svg>
</span>
Sizes
<span class="icon is-small">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M17.74 2.76a4.321 4.321 0 0 1 0 6.1l-1.53 1.52c-1.12 1.12-2.7 1.47-4.14 1.09l2.62-2.61l.76-.77l.76-.76c.84-.84.84-2.2 0-3.04a2.13 2.13 0 0 0-3.04 0l-.77.76l-3.38 3.38c-.37-1.44-.02-3.02 1.1-4.14l1.52-1.53a4.321 4.321 0 0 1 6.1 0zM8.59 13.43l5.34-5.34c.42-.42.42-1.1 0-1.52c-.44-.43-1.13-.39-1.53 0l-5.33 5.34c-.42.42-.42 1.1 0 1.52c.44.43 1.13.39 1.52 0zm-.76 2.29l4.14-4.15c.38 1.44.03 3.02-1.09 4.14l-1.52 1.53a4.321 4.321 0 0 1-6.1 0a4.321 4.321 0 0 1 0-6.1l1.53-1.52c1.12-1.12 2.7-1.47 4.14-1.1l-4.14 4.15c-.85.84-.85 2.2 0 3.05c.84.84 2.2.84 3.04 0z"/></svg>
</span>
<span class="icon">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M6.4 14.1l1.3 1.3l6.9-6.9l-1.3-1.3l-6.9 6.9zm6.3-7.5l-1.3-1.3l-6.9 6.9l1.4 1.4l6.8-7zm2.1-4.7l3.3 3.3c.6.6.5 1.5 0 2l-9.9 9.9l-6.9 1.4l1.4-6.9c6.2-6.3 9.5-9.6 9.9-9.9c.6-.4 1.6-.4 2.2.2z" /></svg>
</span>
<span class="icon is-medium">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M9 15h2V9H9v6zm1-10c-.5 0-1 .5-1 1s.5 1 1 1s1-.5 1-1s-.5-1-1-1zm0-4c-5 0-9 4-9 9s4 9 9 9s9-4 9-9s-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7s7 3.1 7 7s-3.1 7-7 7z" /></svg>
</span>
<span class="icon is-large">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M15 6v2c1.1 0 2 .9 2 2v7c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-7c0-1.1.9-2 2-2V6c0-2.76 2.24-5 5-5s5 2.24 5 5zM8 6v2h4V6c0-1.1-.9-2-2-2s-2 .9-2 2zm2.8 10.25v-2.17c.7-.31 1.2-1.01 1.2-1.83c0-1.1-.9-2-2-2s-2 .9-2 2c0 .82.5 1.52 1.2 1.83v2.17h1.6z" /></svg>
</span>
Combined with other elements
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left">
<input class="input" type="email" placeholder="Email Address">
<span class="icon is-small is-left">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M467 61H45C20.218 61 0 81.196 0 106v300c0 24.72 20.128 45 45 45h422c24.72 0 45-20.128 45-45V106c0-24.72-20.128-45-45-45zm-6.214 30L256.954 294.833 51.359 91h409.427zM30 399.788V112.069l144.479 143.24L30 399.788zM51.213 421l144.57-144.57 50.657 50.222c5.864 5.814 15.327 5.795 21.167-.046L317 277.213 460.787 421H51.213zM482 399.787L338.213 256 482 112.212v287.575z"/></svg>
</span>
</div>
</div>
<button class="button is-primary">
<span>Share</span>
<span class="icon is-small">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="currentColor" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"/></svg>
</span>
</button>