Button

The Button component renders either a <button> or an <a> element styled with Bulma’s button classes. Pass href to render a link.

Basic button

Default

<Button>Default</Button>

Colors

PrimaryLinkInfoSuccessWarningDanger

<Button color="primary">Primary</Button>
<Button color="link">Link</Button>
<Button color="info">Info</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>

Sizes

SmallNormalLarge

<Button size="small">Small</Button>
<Button>Normal</Button>
<Button size="large">Large</Button>

Outlined & light variants

OutlinedLight

<Button color="primary" outlined>Outlined</Button>
<Button color="primary" light>Light</Button>

Full width

Full width

<Button color="info" fullwidth>Full width</Button>

Disabled

Disabled

<Button color="primary" disabled>Disabled</Button>

As a link

Open Bulma docs

<Button href="https://bulma.io" target="_blank" rel="noopener" color="link">
  Open Bulma docs
</Button>

Submit button

Save

<Button type="submit" color="success">Save</Button>

Props

Prop	Type	Default	Description
color	"primary" | "danger" | "warning" | "info" | "success" | "link" | "light" | "white"	—	Bulma color modifier.
size	"small" | "large"	—	Size modifier.
fullwidth	boolean	—	Stretches to full container width.
outlined	boolean	—	Outlined (transparent background) style.
light	boolean	—	Light variant.
disabled	boolean	—	Disables the button. Only valid without href.
type	"button" | "submit" | "reset"	"button"	Button type. Only valid without href.
form	string	—	Associates with a <form> by id. Only without href.
href	string	—	Renders as <a> when provided.
target	string	—	Link target. Only valid with href.
rel	string	—	Link rel. Only valid with href.
title	string	—	Tooltip title.
id	string	—	Element id.
class	string	—	Extra CSS classes.