Buttons and modifiers

Bulma styles the native <button> and <a class="button"> elements with a shared button base class. Color and size come from modifiers: is-primary, is-light, is-small, is-fullwidth.

Semantics and states

• Use <button type="button"> for actions; use anchors only when navigation is the real behavior.
• Disabled: add the disabled attribute on buttons or the is-static modifier where appropriate.
• Grouped actions: wrap siblings in buttons or buttons has-addons for segmented toolbars.

Compared to Bootstrap buttons, Bulma uses is-* modifiers instead of btn-primary. Tailwind composes utilities; Bulma encodes hover, focus, and contrast in the element stylesheet.

Important interview questions and answers

1. Q: button vs is-primary?
   A: button is the element class; is-primary picks the palette variant—modifiers stack on the base.
2. Q: When use is-light or is-outlined?
   A: is-light softens backgrounds on colored sections; is-outlined keeps transparent fills with a border—useful on busy heroes or images.

Self-check

1. Which two classes create a small danger button?
2. Why prefer a real button over a styled div?