title: Badge
label: Badge
status: live
context:
  component-type: element
variants:
  - name: default
    hidden: true
    context:
      text: alpha
      theme: primary

  - name: primary
    context:
      text: alpha
      theme: primary
      angular: <vf-badge [text]="'alpha'" [theme]="'primary'" [id]="'Badge1'"/>

  - name: secondary
    context:
      isExample: true
      text: alpha
      theme: secondary
      angular: <vf-badge [text]="'alpha'" [theme]="'secondary'" [style]="['primary', 'secondary']"></vf-badge>

  - name: tertiary
    context:
      isExample: true
      text: alpha
      theme: tertiary
      angular: <vf-badge [text]="'alpha'" [theme]="'tertiary'" [id]="'Badge2'"></vf-badge>

  - name: link - primary
    context:
      isExample: true
      badge_href: "JavaScript:Void(0);"
      theme: primary
      text: beta
      angular: <vf-badge [text]="'beta'" [theme]="'primary'" [id]="'BadgeHref'" [badge_href]="'JavaScript:Void(0);'"></vf-badge>
