Button

The classic button, in different colors, sizes, and states

To use a Button component in your application, you need to import the BulmaButtonModule by adding the following lines to your app.module.ts file.

import { BulmaButtonModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaButtonModule],
  // ...
})
export class AppModule {}

Basic

To display the Button component in your Angular application, add the buButton directive in the <button> tag.

Directive Description
buButton For displaying a Button element as Bulma button
Properties Description
theme Set the theme of the Button
color Set the color of the Button
size Set the size of the Button
outlined Set the outlined style of the Button, default value is false
inverted Set the inverted style of the Button, default value is false
rounded Make the edges rounded, giving the button a capsule like shape, default value is false
delete Render the button as a delete button, default value is false
hovered Set the hover state of the Button, default value is false
focus Set the focus state of the Button, default value is false
active Set the active state of the Button, default value is false
loading Set the loading state of the Button, default value is false

Default

<button buButton>Button</button>

Anchor button

Anchor
<a buButton>Anchor</a>

Colors

You can change the color of the button by using one of the 5 color modifiers:

  • white
  • light
  • dark
  • black
  • text

<button buButton color="white">White</button>
<button buButton color="light">Light</button>
<button buButton color="dark">Dark</button>
<button buButton color="black">Black</button>
<button buButton color="text">Text</button>

Themes

You can change the theme of the button using one the 6 theme options:

  • primary
  • link
  • info
  • success
  • warning
  • danger

<button buButton theme="primary">Primary</button>
<button buButton theme="link">Link</button>
<button buButton theme="info">Info</button>
<button buButton theme="success">Success</button>
<button buButton theme="warning">Warning</button>
<button buButton theme="danger">Danger</button>

Light theme version

If you want to apply the light version of the theme, set the light property to true.


<button buButton theme="primary" light="true">Primary</button>
<button buButton theme="link" light="true">Link</button>
<button buButton theme="info" light="true">Info</button>
<button buButton theme="success" light="true">Success</button>
<button buButton theme="warning" light="true">Warning</button>
<button buButton theme="danger" light="true">Danger</button>

Sizes

You can set the size of the button using one the 4 size options:

  • small
  • normal
  • medium
  • large

<button buButton size='small'>Small</button>
<button buButton>Default</button>
<button buButton size='normal'>Normal</button>
<button buButton size='medium'>Medium</button>
<button buButton size='large'>Large</button>

Displays

<button buButton size="small" fullWidth="true">Small</button>
<button buButton fullWidth="true">Default</button>
<button buButton size="normal" fullWidth="true">Normal</button>
<button buButton size="medium" fullWidth="true">Medium</button>
<button buButton size="large" fullWidth="true">Large</button>

Outlined Style

<button buButton outlined="true">Outlined</button>
<button buButton theme="primary" outlined="true">Outlined</button>
<button buButton theme="link" outlined="true">Outlined</button>
<button buButton theme="info" outlined="true">Outlined</button>
<button buButton theme="success" outlined="true">Outlined</button>
<button buButton theme="warning" outlined="true">Outlined</button>
<button buButton theme="danger" outlined="true">Outlined</button>

Inverted Style

<button buButton theme="primary" inverted="true">Inverted</button>
<button buButton theme="link" inverted="true">Inverted</button>
<button buButton theme="info" inverted="true">Inverted</button>
<button buButton theme="success" inverted="true">Inverted</button>
<button buButton theme="warning" inverted="true">Inverted</button>
<button buButton theme="danger" inverted="true">Inverted</button>

Inverted Outlined Style

<button buButton theme="primary" inverted="true" outlined="true">
  Invert Outlined
</button>
<button buButton theme="link" inverted="true" outlined="true">
  Invert Outlined
</button>
<button buButton theme="info" inverted="true" outlined="true">
  Invert Outlined
</button>
<button buButton theme="success" inverted="true" outlined="true">
  Invert Outlined
</button>
<button buButton theme="warning" inverted="true" outlined="true">
  Invert Outlined
</button>
<button buButton theme="danger" inverted="true" outlined="true">
  Invert Outlined
</button>

Rounded buttons

<button buButton theme="primary" rounded="true">Rounded</button>
<button buButton theme="link" rounded="true">Rounded</button>
<button buButton theme="info" rounded="true">Rounded</button>
<button buButton theme="success" rounded="true">Rounded</button>
<button buButton theme="warning" rounded="true">Rounded</button>
<button buButton theme="danger" rounded="true">Rounded</button>

Delete buttons

<button buButton delete="true"></button>
<button buButton size="small" delete="true"></button>
<button buButton size="medium" delete="true"></button>
<button buButton size="large" delete="true"></button>

State: Hover

<button buButton hovered="true">Hover</button>
<button buButton theme="primary" hovered="true">Hover</button>
<button buButton theme="link" hovered="true">Hover</button>
<button buButton theme="info" hovered="true">Hover</button>
<button buButton theme="success" hovered="true">Hover</button>
<button buButton theme="warning" hovered="true">Hover</button>
<button buButton theme="danger" hovered="true">Hover</button>

State: Focus

<button buButton focus="true">Focus</button>
<button buButton theme="primary" focus="true">Focus</button>
<button buButton theme="link" focus="true">Focus</button>
<button buButton theme="info" focus="true">Focus</button>
<button buButton theme="success" focus="true">Focus</button>
<button buButton theme="warning" focus="true">Focus</button>
<button buButton theme="danger" focus="true">Focus</button>

State: Active

<button buButton active="true">Active</button>
<button buButton theme="primary" active="true">Active</button>
<button buButton theme="link" active="true">Active</button>
<button buButton theme="info" active="true">Active</button>
<button buButton theme="success" active="true">Active</button>
<button buButton theme="warning" active="true">Active</button>
<button buButton theme="danger" active="true">Active</button>

State: Loading

<button buButton loading="true">Loading</button>
<button buButton theme="primary" loading="true">Loading</button>
<button buButton theme="link" loading="true">Loading</button>
<button buButton theme="info" loading="true">Loading</button>
<button buButton theme="success" loading="true">Loading</button>
<button buButton theme="warning" loading="true">Loading</button>
<button buButton theme="danger" loading="true">Loading</button>