# bx-badge

Bootstrap badge component

# usage

A simple badge component

<bx-badge text="Open"></bx-badge>

-- or --

<bx-badge>
  Merged
</bx-badge>

variant

<bx-badge variant="danger">Closed</bx-badge>

for list of available variants please check [API].

pill

<bx-badge pill>Circled</bx-badge>

More rounded pill badges

link

If link property is passed, badge will become a link tag

target

<a> tag target property.

Convert a simple bx-badge component to pill

simple js example:

let badge = document.querySelector('bx-badge');
badge.pill = true;

Adding link and target

simple js example:

let badge = document.querySelector('bx-badge');
badge.link = "https://stenciljs.com/";
badge.target = "_top";

Property	Attribute	Type	Default
`link`	`link`	`string`	`undefined`
`pill`	`pill`	`boolean`	`false`
`target`	`target`	`string`	`undefined`
`text`	`text`	`string`	`undefined`
`variant`	`variant`	`Variants.danger \\| Variants.dark \\| Variants.info \\| Variants.light \\| Variants.primary \\| Variants.secondary \\| Variants.success \\| Variants.warning`	`Variants.primary`