<Button type="is-primary" on:click={() => counter++}>
Click!: {counter}
</Button>
States, styles, and types
<div class="buttons">
<Button type="is-primary">Primary</Button>
<Button type="is-success">Success</Button>
<Button type="is-danger">Danger</Button>
<Button type="is-warning">Warning</Button>
<Button type="is-info">Info</Button>
<Button type="is-link">Link</Button>
<Button type="is-light">Light</Button>
<Button type="is-dark">Dark</Button>
<Button type="is-text">Text</Button>
</div>
<div class="buttons">
<Button disabled>Disabled</Button>
<Button type="is-primary" loading>Loading</Button>
<Button type="is-success" rounded>Rounded</Button>
<Button type="is-info" outline>Outlined</Button>
</div>
<div class="buttons">
<div class="notification is-primary">
<Button type="is-primary" inverted>Inverted</Button>
<Button type="is-primary" inverted outlined>Invert Outlined</Button>
</div>
</div>
<div class="buttons">
<Button type="is-primary" nativeType="submit">Submit</Button>
<Button type="is-primary" nativeType="reset">Reset</Button>
</div>
Sizes
<div class="buttons">
<Button size="is-small">Small</Button>
<Button>Default</Button>
<Button size="is-medium">Medium</Button>
<Button size="is-large">Large</Button>
</div>
Icons
<div class="buttons">
<Button>
<Icon icon="bold" />
</Button>
<Button>
<Icon icon="underline" />
</Button>
<Button>
<Icon icon="italic" />
</Button>
</div>
<div class="buttons">
<Button iconPack="fab" iconLeft="github">GitHub</Button>
<Button type="is-primary" iconPack="fab" iconLeft="twitter">Twitter</Button>
<Button type="is-success" iconPack="fa" iconLeft="check">Save</Button>
<Button type="is-danger" outline iconPack="fa" iconRight="times">Delete</Button>
</div>
<div class="buttons">
<Button size="is-small" iconPack="fab" iconLeft="github">GitHub</Button>
<Button iconLeft="github" iconPack="fab">GitHub</Button>
<Button size="is-medium" iconPack="fab" iconLeft="github">GitHub</Button>
<Button size="is-large" iconPack="fab" iconLeft="github">GitHub</Button>
</div>
API
Name | Description | Type | Values | Default |
tag | HTML tag to use for button (either 'a' or 'button') | String | button , a
| button |
type | Type (color of control), optional | String | is-white , is-black , is-light , is-dark , is-primary , is-info , is-success , is-warning , is-danger | — |
size | Size of button, optional | String | is-small , is-medium , is-large | — |
href | Href to use when tag is 'a', optional | String | — | — |
nativeType | Native button type, optional | String | Any native button type (button , submit , reset) | — |