Button

The b.Button, b.ButtonA, b.ButtonAHref, b.ButtonSubmit, b.ButtonInputSubmit and b.ButtonInputReset constructors create buttons.

Modifier	Action
`b.Responsive`	Responsive size
`b.FullWidth`	Take the whole width
`b.Outlined`	Outline style
`b.Inverted`	Inverted style
`b.Rounded`	Rounded button
`b.Hovered`	Apply the hovered style
`b.Focused`	Apply the focused style
`b.Active`	Apply the active style
`b.Loading`	Replace the content with a loading spinner
`b.Static`	Make the button non-interactive
`e.Disabled()`	Disable the button
`e.Disabled(bool)`	Disable the button conditionally
`b.Selected`	In a list of attached buttons (Buttons with Addons), make sure this button is above the other buttons
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large
`b.White`	Set color to white
`b.Light`	Set color to light
`b.Dark`	Set color to dark
`b.Black`	Set color to black
`b.Text`	Set style to underlined text
`b.Ghost`	Set style to link-looking blue text
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.PrimaryLight`	Set color to primary light
`b.LinkLight`	Set color to link light
`b.InfoLight`	Set color to info light
`b.SuccessLight`	Set color to success light
`b.WarningLight`	Set color to warning light
`b.DangerLight`	Set color to danger light
`b.PrimaryDark`	Set color to primary dark
`b.LinkDark`	Set color to link dark
`b.InfoDark`	Set color to info dark
`b.SuccessDark`	Set color to success dark
`b.WarningDark`	Set color to warning dark
`b.DangerDark`	Set color to danger dark

The b.Buttons constructor creates a button.

Modifier	Action
`b.Addons`	Attach the buttons together
`b.Centered`	Center the buttons
`b.Right`	Align the buttons to the right
`b.Small`	Set the buttons size to small
`b.Medium`	Set the buttons size to medium
`b.Large`	Set the buttons size to large

Bulma examples

Bulma documentation

Example

Code

b.Button("Button")

ResultHTML

<button class="button">Button</button>

Example

Code

b.Buttons(
	b.ButtonA("Anchor"),
	b.Button("Button"),
	b.ButtonInputSubmit("Submit input"),
	b.ButtonInputReset("Reset input"),
)

ResultHTML

<div class="buttons"><a class="button">Anchor</a><button class="button">Button</button><input class="button" type="submit" value="Submit input"><input class="button" type="reset" value="Reset input"></div>

Colors

Bulma documentation

Example

Code

b.Buttons(
	b.Button(b.White, "White"),
	b.Button(b.Light, "Light"),
	b.Button(b.Dark, "Dark"),
	b.Button(b.Black, "Black"),
	b.Button(b.Text, "Text"),
	b.Button(b.Ghost, "Ghost"),
)

ResultHTML

<div class="buttons"><button class="button is-white">White</button><button class="button is-light">Light</button><button class="button is-dark">Dark</button><button class="button is-black">Black</button><button class="button is-text">Text</button><button class="button is-ghost">Ghost</button></div>

Example

Code

b.Buttons(
	b.Button(b.Primary, "Primary"),
	b.Button(b.Link, "Link"),
),
b.Buttons(
	b.Button(b.Info, "Info"),
	b.Button(b.Success, "Success"),
	b.Button(b.Warning, "Warning"),
	b.Button(b.Danger, "Danger"),
)

ResultHTML

<div class="buttons"><button class="button is-primary">Primary</button><button class="button is-link">Link</button></div>
<div class="buttons"><button class="button is-info">Info</button><button class="button is-success">Success</button><button class="button is-warning">Warning</button><button class="button is-danger">Danger</button></div>

Example

Code

b.Buttons(
	b.Button(b.PrimaryLight, "Primary"),
	b.Button(b.LinkLight, "Link"),
),
b.Buttons(
	b.Button(b.InfoLight, "Info"),
	b.Button(b.SuccessLight, "Success"),
	b.Button(b.WarningLight, "Warning"),
	b.Button(b.DangerLight, "Danger"),
)

ResultHTML

<div class="buttons"><button class="is-light button is-primary">Primary</button><button class="button is-link is-light">Link</button></div>
<div class="buttons"><button class="button is-info is-light">Info</button><button class="is-light button is-success">Success</button><button class="is-light button is-warning">Warning</button><button class="button is-danger is-light">Danger</button></div>

Example

Code

b.Buttons(
	b.Button(b.PrimaryDark, "Primary"),
	b.Button(b.LinkDark, "Link"),
),
b.Buttons(
	b.Button(b.InfoDark, "Info"),
	b.Button(b.SuccessDark, "Success"),
	b.Button(b.WarningDark, "Warning"),
	b.Button(b.DangerDark, "Danger"),
)

ResultHTML

<div class="buttons"><button class="button is-primary is-dark">Primary</button><button class="button is-link is-dark">Link</button></div>
<div class="buttons"><button class="is-info is-dark button">Info</button><button class="button is-success is-dark">Success</button><button class="is-dark button is-warning">Warning</button><button class="button is-danger is-dark">Danger</button></div>

Sizes

Bulma documentation

Example

Code

b.Buttons(
	b.Button(b.Small, "Small"),
	b.Button("Default"),
	b.Button(b.Normal, "Normal"),
	b.Button(b.Medium, "Medium"),
	b.Button(b.Large, "Large"),
)

ResultHTML

<div class="buttons"><button class="button is-small">Small</button><button class="button">Default</button><button class="button is-normal">Normal</button><button class="button is-medium">Medium</button><button class="button is-large">Large</button></div>

Example

Code

b.Buttons(
	b.Medium,
	b.Button("All"),
	b.Button("Medium"),
	b.Button("Size"),
)

ResultHTML

<div class="buttons are-medium"><button class="button">All</button><button class="button">Medium</button><button class="button">Size</button></div>

Example

Code

b.Buttons(
	b.Small,
	b.Button("Small"),
	b.Button("Small"),
	b.Button("Small"),
	b.Button(b.Normal, "Normal"),
	b.Button("Small"),
)

ResultHTML

<div class="buttons are-small"><button class="button">Small</button><button class="button">Small</button><button class="button">Small</button><button class="is-normal button">Normal</button><button class="button">Small</button></div>

Responsive sizes

Bulma documentation

Example

Code

b.Button(b.Responsive, "Default")

ResultHTML

<button class="button is-responsive">Default</button>

Example

Code

b.Button(b.Small, b.Responsive, "Small")

ResultHTML

<button class="button is-small is-responsive">Small</button>

Example

Code

b.Button(b.Normal, b.Responsive, "Normal")

ResultHTML

<button class="button is-normal is-responsive">Normal</button>

Example

Code

b.Button(b.Medium, b.Responsive, "Medium")

ResultHTML

<button class="button is-medium is-responsive">Medium</button>

Example

Code

b.Button(b.Large, b.Responsive, "Large")

ResultHTML

<button class="button is-large is-responsive">Large</button>

Displays

Bulma documentation

Example

Code

b.Buttons(
	b.Button(b.Small, b.FullWidth, "Small"),
	b.Button(b.FullWidth, "Normal"),
	b.Button(b.Medium, b.FullWidth, "Medium"),
	b.Button(b.Large, b.FullWidth, "Large"),
)

ResultHTML

<div class="buttons"><button class="button is-small is-fullwidth">Small</button><button class="button is-fullwidth">Normal</button><button class="button is-medium is-fullwidth">Medium</button><button class="button is-large is-fullwidth">Large</button></div>

Styles

Bulma documentation

Example

Code

b.Buttons(
	b.Button(b.Link, b.Outlined, "Outlined"),
	b.Button(b.Primary, b.Outlined, "Outlined"),
	b.Button(b.Info, b.Outlined, "Outlined"),
	b.Button(b.Success, b.Outlined, "Outlined"),
	b.Button(b.Danger, b.Outlined, "Outlined"),
)

ResultHTML

<div class="buttons"><button class="button is-link is-outlined">Outlined</button><button class="button is-primary is-outlined">Outlined</button><button class="is-info is-outlined button">Outlined</button><button class="button is-success is-outlined">Outlined</button><button class="is-danger is-outlined button">Outlined</button></div>

Example

Code

b.Buttons(
	b.Button(b.Link, b.Inverted, "Inverted"),
	b.Button(b.Primary, b.Inverted, "Inverted"),
	b.Button(b.Info, b.Inverted, "Inverted"),
	b.Button(b.Success, b.Inverted, "Inverted"),
	b.Button(b.Danger, b.Inverted, "Inverted"),
)

ResultHTML

<div class="buttons"><button class="button is-link is-inverted">Inverted</button><button class="button is-primary is-inverted">Inverted</button><button class="button is-info is-inverted">Inverted</button><button class="button is-success is-inverted">Inverted</button><button class="button is-danger is-inverted">Inverted</button></div>

Example

Code

b.Buttons(
	b.Button(b.Rounded, "Rounded"),
	b.Button(b.Link, b.Rounded, "Rounded"),
	b.Button(b.Primary, b.Rounded, "Rounded"),
	b.Button(b.Info, b.Rounded, "Rounded"),
	b.Button(b.Success, b.Rounded, "Rounded"),
	b.Button(b.Danger, b.Rounded, "Rounded"),
)

ResultHTML

<div class="buttons"><button class="button is-rounded">Rounded</button><button class="is-rounded button is-link">Rounded</button><button class="is-primary is-rounded button">Rounded</button><button class="button is-info is-rounded">Rounded</button><button class="button is-success is-rounded">Rounded</button><button class="is-danger is-rounded button">Rounded</button></div>

States

Bulma documentation

Example

Code

b.Buttons(
	b.Button("Normal"),
	b.Button(b.Link, "Normal"),
	b.Button(b.Primary, "Normal"),
	b.Button(b.Info, "Normal"),
	b.Button(b.Success, "Normal"),
	b.Button(b.Danger, "Normal"),
)

ResultHTML

<div class="buttons"><button class="button">Normal</button><button class="is-link button">Normal</button><button class="button is-primary">Normal</button><button class="button is-info">Normal</button><button class="is-success button">Normal</button><button class="button is-danger">Normal</button></div>

Example

Code

b.Buttons(
	b.Button(b.Hovered, "Hover"),
	b.Button(b.Link, b.Hovered, "Hover"),
	b.Button(b.Primary, b.Hovered, "Hover"),
	b.Button(b.Info, b.Hovered, "Hover"),
	b.Button(b.Success, b.Hovered, "Hover"),
	b.Button(b.Danger, b.Hovered, "Hover"),
)

ResultHTML

<div class="buttons"><button class="button is-hovered">Hover</button><button class="button is-link is-hovered">Hover</button><button class="button is-primary is-hovered">Hover</button><button class="is-hovered button is-info">Hover</button><button class="button is-success is-hovered">Hover</button><button class="is-danger is-hovered button">Hover</button></div>

Example

Code

b.Buttons(
	b.Button(b.Focused, "Focus"),
	b.Button(b.Link, b.Focused, "Focus"),
	b.Button(b.Primary, b.Focused, "Focus"),
	b.Button(b.Info, b.Focused, "Focus"),
	b.Button(b.Success, b.Focused, "Focus"),
	b.Button(b.Danger, b.Focused, "Focus"),
)

ResultHTML

<div class="buttons"><button class="button is-focused">Focus</button><button class="button is-link is-focused">Focus</button><button class="button is-primary is-focused">Focus</button><button class="button is-info is-focused">Focus</button><button class="is-success is-focused button">Focus</button><button class="button is-danger is-focused">Focus</button></div>

Example

Code

b.Buttons(
	b.Button(b.Active, "Active"),
	b.Button(b.Link, b.Active, "Active"),
	b.Button(b.Primary, b.Active, "Active"),
	b.Button(b.Info, b.Active, "Active"),
	b.Button(b.Success, b.Active, "Active"),
	b.Button(b.Danger, b.Active, "Active"),
)

ResultHTML

<div class="buttons"><button class="button is-active">Active</button><button class="button is-link is-active">Active</button><button class="button is-primary is-active">Active</button><button class="button is-info is-active">Active</button><button class="is-active button is-success">Active</button><button class="is-danger is-active button">Active</button></div>

Example

Code

b.Buttons(
	b.Button(b.Loading, "Loading"),
	b.Button(b.Link, b.Loading, "Loading"),
	b.Button(b.Primary, b.Loading, "Loading"),
	b.Button(b.Info, b.Loading, "Loading"),
	b.Button(b.Success, b.Loading, "Loading"),
	b.Button(b.Danger, b.Loading, "Loading"),
)

ResultHTML

<div class="buttons"><button class="button is-loading">Loading</button><button class="button is-link is-loading">Loading</button><button class="is-loading button is-primary">Loading</button><button class="button is-info is-loading">Loading</button><button class="is-success is-loading button">Loading</button><button class="is-loading button is-danger">Loading</button></div>

Example

Code

b.Button(b.Static, "Static")

ResultHTML

<button class="button is-static">Static</button>

Example

Code

b.Buttons(
	b.Button(
		e.TitleAttr("Disabled button"),
		e.Disabled(), "Disabled",
	),
	b.Button(
		e.TitleAttr("Disabled button"),
		b.Primary, e.Disabled(), "Disabled",
	),
	b.Button(
		e.TitleAttr("Disabled button"),
		b.Link, e.Disabled(), "Disabled",
	),
	b.Button(
		e.TitleAttr("Disabled button"),
		b.Info, e.Disabled(), "Disabled",
	),
	b.Button(
		e.TitleAttr("Disabled button"),
		b.Success, e.Disabled(), "Disabled",
	),
	b.Button(
		e.TitleAttr("Disabled button"),
		b.Warning, e.Disabled(), "Disabled",
	),
	b.Button(
		e.TitleAttr("Disabled button"),
		b.Danger, e.Disabled(), "Disabled",
	),
)

ResultHTML

<div class="buttons"><button class="button" title="Disabled button" disabled>Disabled</button><button class="button is-primary" title="Disabled button" disabled>Disabled</button><button class="button is-link" title="Disabled button" disabled>Disabled</button><button class="is-info button" title="Disabled button" disabled>Disabled</button><button class="button is-success" title="Disabled button" disabled>Disabled</button><button class="button is-warning" title="Disabled button" disabled>Disabled</button><button class="button is-danger" title="Disabled button" disabled>Disabled</button></div>

The fa package includes helper functions and values for using Font Awesome icons with Bulma-Gomponents.

Example

Code

b.Buttons(
	html.P,
	b.Button(fa.Icon(fa.Solid, "bold")),
	b.Button(fa.Icon(fa.Solid, "italic")),
	b.Button(fa.Icon(fa.Solid, "underline")),
),
b.Buttons(
	html.P,
	b.Button(fa.Icon(fa.Brand, "github"), "GitHub"),
	b.Button(b.Primary, fa.Icon(fa.Brand, "twitter"), "@jgthms"),
	b.Button(b.Success, fa.Icon(fa.Solid, "check"), "Save"),
	b.Button(b.Danger, b.Outlined, "Delete", fa.Icon(fa.Solid, "times", b.Small)),
),
b.Buttons(
	html.P,
	b.Button(b.Small, fa.Icon(fa.Brand, "github", b.Small), "GitHub"),
	b.Button(fa.Icon(fa.Brand, "github"), "GitHub"),
	b.Button(b.Medium, fa.Icon(fa.Brand, "github"), "GitHub"),
	b.Button(b.Large, fa.Icon(fa.Brand, "github", b.Medium), "GitHub"),
)

ResultHTML

<p class="buttons"><button class="button"><span class="icon"><i class="fa-solid fa-bold"></i></span></button><button class="button"><span class="icon"><i class="fa-solid fa-italic"></i></span></button><button class="button"><span class="icon"><i class="fa-solid fa-underline"></i></span></button></p>
<p class="buttons"><button class="button"><span class="icon"><i class="fa-brands fa-github"></i></span><span>GitHub</span></button><button class="button is-primary"><span class="icon"><i class="fa-brands fa-twitter"></i></span><span>@jgthms</span></button><button class="button is-success"><span class="icon"><i class="fa-solid fa-check"></i></span><span>Save</span></button><button class="is-danger is-outlined button"><span>Delete</span><span class="is-small icon"><i class="fa-times fa-solid"></i></span></button></p>
<p class="buttons"><button class="is-small button"><span class="is-small icon"><i class="fa-brands fa-github"></i></span><span>GitHub</span></button><button class="button"><span class="icon"><i class="fa-brands fa-github"></i></span><span>GitHub</span></button><button class="button is-medium"><span class="icon"><i class="fa-brands fa-github"></i></span><span>GitHub</span></button><button class="button is-large"><span class="is-medium icon"><i class="fa-brands fa-github"></i></span><span>GitHub</span></button></p>

Example

Code

b.Buttons(
	html.P,
	b.Button(b.Small, fa.Icon(fa.Solid, "heading", b.Small)),
),
b.Buttons(
	html.P,
	b.Button(fa.Icon(fa.Solid, "heading", b.Small)),
	b.Button(fa.Icon(fa.Solid, "heading", fa.SizeLg)),
),
b.Buttons(
	html.P,
	b.Button(b.Medium, fa.Icon(fa.Solid, "heading", b.Small)),
	b.Button(b.Medium, fa.Icon(fa.Solid, "heading", fa.SizeLg)),
	b.Button(b.Medium, fa.Icon(fa.Solid, "heading", b.Medium, fa.Size2x)),
),
b.Buttons(
	html.P,
	b.Button(b.Large, fa.Icon(fa.Solid, "heading", b.Small)),
	b.Button(b.Large, fa.Icon(fa.Solid, "heading", fa.SizeLg)),
	b.Button(b.Large, fa.Icon(fa.Solid, "heading", b.Medium, fa.Size2x)),
)

ResultHTML

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

Button group

Bulma documentation

Example

Code

b.Field(
	b.Grouped,
	b.Control(
		html.P,
		b.Button(b.Link, "Save changes"),
	),
	b.Control(
		html.P,
		b.Button("Cancel"),
	),
	b.Control(
		html.P,
		b.Button(b.Danger, "Delete post"),
	),
)

ResultHTML

<div class="field is-grouped"><p class="control"><button class="is-link button">Save changes</button></p><p class="control"><button class="button">Cancel</button></p><p class="control"><button class="button is-danger">Delete post</button></p></div>

Button addons

Bulma documentation

Example

Code

b.Field(
	b.Addons,
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "align-left", b.Small),
			"Left",
		),
	),
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "align-center", b.Small),
			"Center",
		),
	),
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "align-right", b.Small),
			"Right",
		),
	),
)

ResultHTML

<div class="field has-addons"><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-align-left"></i></span><span>Left</span></button></p><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-align-center"></i></span><span>Center</span></button></p><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-align-right"></i></span><span>Right</span></button></p></div>

Button group with addons

Bulma documentation

Example

Code

b.Field(
	b.Addons,
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "bold", b.Small),
			"Bold",
		),
	),
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "italic", b.Small),
			"Italic",
		),
	),
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "underline", b.Small),
			"Underline",
		),
	),
),
b.Field(
	b.Addons,
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "align-left", b.Small),
			"Left",
		),
	),
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "align-center", b.Small),
			"Center",
		),
	),
	b.Control(
		html.P,
		b.Button(
			fa.Icon(fa.Solid, "align-right", b.Small),
			"Right",
		),
	),
)

ResultHTML

<div class="has-addons field"><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-bold"></i></span><span>Bold</span></button></p><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-italic"></i></span><span>Italic</span></button></p><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-underline"></i></span><span>Underline</span></button></p></div>
<div class="field has-addons"><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-align-left"></i></span><span>Left</span></button></p><p class="control"><button class="button"><span class="is-small icon"><i class="fa-solid fa-align-center"></i></span><span>Center</span></button></p><p class="control"><button class="button"><span class="is-small icon"><i class="fa-align-right fa-solid"></i></span><span>Right</span></button></p></div>

List of buttons

Bulma documentation

Example

Code

b.Buttons(
	b.Button(b.Success, "Save changes"),
	b.Button(b.Info, "Save and continue"),
	b.Button(b.Danger, "Cancel"),
)

ResultHTML

<div class="buttons"><button class="button is-success">Save changes</button><button class="button is-info">Save and continue</button><button class="button is-danger">Cancel</button></div>

Example

Code

b.Buttons(
	b.Button("One"),
	b.Button("Two"),
	b.Button("Three"),
	b.Button("Four"),
	b.Button("Five"),
	b.Button("Six"),
	b.Button("Seven"),
	b.Button("Eight"),
	b.Button("Nine"),
	b.Button("Ten"),
	b.Button("Eleven"),
	b.Button("Twelve"),
	b.Button("Thirteen"),
	b.Button("Fourteen"),
	b.Button("Fifteen"),
	b.Button("Sixteen"),
	b.Button("Seventeen"),
	b.Button("Eighteen"),
	b.Button("Nineteen"),
	b.Button("Twenty"),
)

ResultHTML

<div class="buttons"><button class="button">One</button><button class="button">Two</button><button class="button">Three</button><button class="button">Four</button><button class="button">Five</button><button class="button">Six</button><button class="button">Seven</button><button class="button">Eight</button><button class="button">Nine</button><button class="button">Ten</button><button class="button">Eleven</button><button class="button">Twelve</button><button class="button">Thirteen</button><button class="button">Fourteen</button><button class="button">Fifteen</button><button class="button">Sixteen</button><button class="button">Seventeen</button><button class="button">Eighteen</button><button class="button">Nineteen</button><button class="button">Twenty</button></div>

Example

Code

b.Buttons(
	b.Addons,
	b.Button("Yes"),
	b.Button("Maybe"),
	b.Button("No"),
)

ResultHTML

<div class="buttons has-addons"><button class="button">Yes</button><button class="button">Maybe</button><button class="button">No</button></div>

Example

Code

b.Buttons(
	b.Addons,
	b.Centered,
	b.Button("Yes"),
	b.Button("Maybe"),
	b.Button("No"),
),
b.Buttons(
	b.Addons,
	b.Right,
	b.Button("Yes"),
	b.Button("Maybe"),
	b.Button("No"),
)

ResultHTML

<div class="buttons has-addons is-centered"><button class="button">Yes</button><button class="button">Maybe</button><button class="button">No</button></div>
<div class="buttons has-addons is-right"><button class="button">Yes</button><button class="button">Maybe</button><button class="button">No</button></div>

Example

Code

b.Buttons(
	b.Addons,
	b.Button(b.Success, b.Selected, "Yes"),
	b.Button("Maybe"),
	b.Button("No"),
),
b.Buttons(
	b.Addons,
	b.Button("Yes"),
	b.Button(b.Info, b.Selected, "Maybe"),
	b.Button("No"),
),
b.Buttons(
	b.Addons,
	b.Button("Yes"),
	b.Button("Maybe"),
	b.Button(b.Danger, b.Selected, "No"),
)

ResultHTML

<div class="has-addons buttons"><button class="button is-success is-selected">Yes</button><button class="button">Maybe</button><button class="button">No</button></div>
<div class="buttons has-addons"><button class="button">Yes</button><button class="is-info is-selected button">Maybe</button><button class="button">No</button></div>
<div class="buttons has-addons"><button class="button">Yes</button><button class="button">Maybe</button><button class="button is-danger is-selected">No</button></div>