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="is-white button">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="button is-primary is-light">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="button is-success is-light">Success</button><button class="button is-warning is-light">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="button is-warning is-dark">Warning</button><button class="is-danger is-dark button">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="button is-normal">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="is-small is-responsive button">Small</button>

Example

Code

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

ResultHTML

<button class="is-normal is-responsive button">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="is-large is-responsive button">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="is-fullwidth button is-large">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="is-link is-outlined button">Outlined</button><button class="button is-primary is-outlined">Outlined</button><button class="button is-info is-outlined">Outlined</button><button class="is-outlined button is-success">Outlined</button><button class="button is-danger is-outlined">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="is-success is-inverted button">Inverted</button><button class="is-danger is-inverted button">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="is-rounded button">Rounded</button><button class="button is-link is-rounded">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="button is-danger is-rounded">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="button is-link">Normal</button><button class="button is-primary">Normal</button><button class="button is-info">Normal</button><button class="button is-success">Normal</button><button class="is-danger button">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="is-hovered button is-primary">Hover</button><button class="button is-info is-hovered">Hover</button><button class="button is-success is-hovered">Hover</button><button class="button is-danger is-hovered">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="button is-success is-focused">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="button is-success is-active">Active</button><button class="button is-danger is-active">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-primary is-loading button">Loading</button><button class="button is-info is-loading">Loading</button><button class="button is-success is-loading">Loading</button><button class="button is-danger is-loading">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="button is-info" title="Disabled button" disabled>Disabled</button><button class="is-success button" 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="is-success button"><span class="icon"><i class="fa-solid fa-check"></i></span><span>Save</span></button><button class="button is-danger is-outlined"><span>Delete</span><span class="is-small icon"><i class="fa-solid fa-times"></i></span></button></p>
<p class="buttons"><button class="button is-small"><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-github fa-brands"></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="button is-small"><span class="is-small icon"><i class="fa-heading fa-solid"></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-solid fa-heading fa-lg"></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="button is-medium"><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="is-small icon"><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-heading fa-2x fa-solid"></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="button is-link">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="icon is-small"><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-align-center fa-solid"></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="field has-addons"><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-align-center fa-solid"></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>

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="is-info button">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="has-addons is-centered buttons"><button class="button">Yes</button><button class="button">Maybe</button><button class="button">No</button></div>
<div class="has-addons is-right buttons"><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="buttons has-addons"><button class="button is-success is-selected">Yes</button><button class="button">Maybe</button><button class="button">No</button></div>
<div class="has-addons buttons"><button class="button">Yes</button><button class="button is-info is-selected">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>