# Badge

> Bootstrap's badge component built with Svelte 5. Use badges to highlight elements, add counts, or display status.

Source: https://bootstrap-svelte.vercel.app/components/badge — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

```html
<Badge>Base badge</Badge>
```

## Badge Variants

Bootstrap includes several predefined badge styles with contextual colors.

```html
<Badge colorVariant="text-bg-primary">Primary</Badge>
<Badge colorVariant="text-bg-secondary">Secondary</Badge>
<Badge colorVariant="text-bg-success">Success</Badge>
<Badge colorVariant="text-bg-danger">Danger</Badge>
<Badge colorVariant="text-bg-warning">Warning</Badge>
<Badge colorVariant="text-bg-info">Info</Badge>
<Badge colorVariant="text-bg-light">Light</Badge>
<Badge colorVariant="text-bg-dark">Dark</Badge>
```

## Badges with Headings

Badges can be used with any heading (h1-h6) to add supplemental information or status indicators.

```html
<h1>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h1>
<h2>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h2>
<h3>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h3>
<h4>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h4>
<h5>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h5>
<h6>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h6>
```

## Button with Badge

Badges can be embedded inside buttons to show counts or status indicators alongside button text.

```html
<button type="button" class="btn btn-primary">
    Notifications <Badge colorVariant="text-bg-light">4</Badge>
</button>
```

## Pill Badges

Create badge with more rounded corners using the `isPill` prop.

```html
<Badge isPill={true} colorVariant="text-bg-primary">Primary</Badge>
<Badge isPill={true} colorVariant="text-bg-secondary">Secondary</Badge>
<Badge isPill={true} colorVariant="text-bg-success">Success</Badge>
<Badge isPill={true} colorVariant="text-bg-danger">Danger</Badge>
<Badge isPill={true} colorVariant="text-bg-warning">Warning</Badge>
<Badge isPill={true} colorVariant="text-bg-info">Info</Badge>
<Badge isPill={true} colorVariant="text-bg-light">Light</Badge>
<Badge isPill={true} colorVariant="text-bg-dark">Dark</Badge>
```

## Subtle Badges

Use subtle badges with lighter backgrounds with the `subtle` variants.

```html
<Badge class="text-secondary-emphasis" colorVariant="bg-secondary-subtle">Subtle</Badge>
<Badge class="text-success-emphasis" colorVariant="bg-success-subtle">Subtle</Badge>
<Badge class="text-danger-emphasis" colorVariant="bg-danger-subtle">Subtle</Badge>
<Badge class="text-warning-emphasis" colorVariant="bg-warning-subtle">Subtle</Badge>
<Badge class="text-info-emphasis" colorVariant="bg-info-subtle">Subtle</Badge>
<Badge class="text-light-emphasis" colorVariant="bg-light-subtle">Subtle</Badge>
<Badge class="text-dark-emphasis" colorVariant="bg-dark-subtle">Subtle</Badge>
```

## Positioned Badges

Use the `position` prop to place badges in the corner of elements.

```html
<!-- Positioned badge on button -->
<button type="button" class="btn btn-primary position-relative">
    Inbox
    <Badge position="top-end" colorVariant="text-bg-danger">99+</Badge>
</button>

<!-- With positioning utilities -->
<button type="button" class="btn btn-primary position-relative">
    Profile
    <Badge
        position="top-end"
        colorVariant="text-bg-danger"
        class="border border-light rounded-circle p-2">
        <span class="visually-hidden">New alerts</span>
    </Badge>
</button>
```

## API Reference

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `text-bg-primary` | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `isPill` | `boolean` | `false` | Makes the badge more rounded (pill shaped) |
| `position` | `string` | — | Used for positioning the badge. Values: 'positioned', 'positioned-top', 'positioned-end', 'positioned-bottom', 'positioned-start' |
| `colorVariant` | `string` | `'text-bg-primary'` | Sets the badge's background color. Values: 'text-bg-primary', 'text-bg-secondary', 'text-bg-success', 'text-bg-danger', 'text-bg-warning', 'text-bg-info', 'text-bg-light', 'text-bg-dark', or *-subtle variants. |

### CSS Classes

The component applies Bootstrap's badge classes based on the provided props:

- `badge` - Always applied as the base class
- `{variant}` - Applied based on the variant prop
- `rounded-pill` - Applied when pill is true
- `position-absolute top-{0|50|100} start-{0|50|100} translate-middle` - Applied based on the position prop