Tag

Small tag labels to insert anywhere

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

import { BulmaTagModule } from '@ngx-builders/ngx-bulma/tag';

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

Basic

To display the Tag component in your Angular application, use <bu-tag> tag.

Component Description
bu-tag Parent Tag Component.
Properties Description
theme Set the theme of the Tag
light Set the the light version of the theme, default value is false
size Set the size of the Tag
rounded Make the edges rounded, giving the tag a capsule like shape, default value is false
delete Render the tag as delete button, default value is false

Default

Tag label
<bu-tag>Tag label</bu-tag>

Themes

You can change the theme of the tag using one the 10 theme options:

  • black
  • dark
  • light
  • white
  • primary
  • link
  • info
  • success
  • warning
  • danger

BlackDarkLightwhitePrimaryLinkInfoSuccessWarningDanger
<bu-tag theme="black">Black</bu-tag>
<bu-tag theme="dark">Dark</bu-tag>
<bu-tag theme="light">Light</bu-tag>
<bu-tag theme="white">white</bu-tag>
<bu-tag theme="primary">Primary</bu-tag>
<bu-tag theme="link">Link</bu-tag>
<bu-tag theme="info">Info</bu-tag>
<bu-tag theme="success">Success</bu-tag>
<bu-tag theme="warning">Warning</bu-tag>
<bu-tag theme="danger">Danger</bu-tag>

Light theme version

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


PrimaryLinkInfoSuccessWarningDanger
<bu-tag theme="primary" light="true">Primary</bu-tag>
<bu-tag theme="link" light="true">Link</bu-tag>
<bu-tag theme="info" light="true">Info</bu-tag>
<bu-tag theme="success" light="true">Success</bu-tag>
<bu-tag theme="warning" light="true">Warning</bu-tag>
<bu-tag theme="danger" light="true">Danger</bu-tag>

Sizes

You can set the size of the tag using one the 3 size options:

  • normal
  • medium
  • large

The default size is normal.


NormalMediumLarge
<bu-tag theme="link" size="normal">Normal</bu-tag>
<bu-tag theme="primary" size="medium">Medium</bu-tag>
<bu-tag theme="info" size="large">Large</bu-tag>

Rounded tags

If you want to make a rounded tag, set the rounded property to true.


PrimaryLinkInfoSuccessWarningDanger
<bu-tag theme="primary" rounded="true">Primary</bu-tag>
<bu-tag theme="link" rounded="true">Link</bu-tag>
<bu-tag theme="info" rounded="true">Info</bu-tag>
<bu-tag theme="success" rounded="true">Success</bu-tag>
<bu-tag theme="warning" rounded="true">Warning</bu-tag>
<bu-tag theme="danger" rounded="true">Danger</bu-tag>

Tags as delete buttons

If you want to to turn the tag into a delete button, set the delete property to true.


<bu-tag delete="true"></bu-tag>
<bu-tag theme="primary" delete="true"></bu-tag>
<bu-tag theme="link" delete="true"></bu-tag>
<bu-tag theme="info" delete="true" rounded="true"></bu-tag>
<bu-tag theme="success" delete="true" rounded="true"></bu-tag>
<bu-tag theme="warning" delete="true" size="medium"></bu-tag>
<bu-tag theme="danger" delete="true" rounded="true" size="large"></bu-tag>

Combinations

You can append a delete button to the tag.


BarHelloWorld
<bu-tag theme="success">Bar<button class="delete is-small"></button></bu-tag>
<bu-tag theme="warning" size="medium">Hello<button class="delete is-small"></button></bu-tag>
<bu-tag theme="danger" size="large">World<button class="delete"></button></bu-tag>