mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
241 lines
8.1 KiB
Plaintext
241 lines
8.1 KiB
Plaintext
---
|
|
title: Badge
|
|
summary: A badge is a small label for a count, a status or a tag. It comes in colors, light and outline styles, pills, dots and notification badges.
|
|
description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.
|
|
related: [/ui/components/status, /ui/components/tag]
|
|
source: core/scss/ui/_badges.scss
|
|
css-vars: badge
|
|
classnames:
|
|
component:
|
|
- class: badge
|
|
desc: Container element
|
|
part:
|
|
- class: badge-dot
|
|
desc: Small dot with no text, for a status marker
|
|
- class: badge-icononly
|
|
desc: Square badge holding only an icon
|
|
- class: badge-notification
|
|
desc: Positions the badge over the corner of its parent
|
|
- class: badge-list
|
|
desc: Wrapper that spaces several badges in a row
|
|
style:
|
|
- class: badge-outline
|
|
desc: Transparent fill with a colored border
|
|
modifier:
|
|
- class: badge-pill
|
|
desc: Fully rounded ends
|
|
behavior:
|
|
- class: badge-blink
|
|
desc: Pulsing animation, for a live counter
|
|
color:
|
|
- class: bg-{color}
|
|
desc: Any base color, for example bg-green or bg-red
|
|
size:
|
|
- class: badge-sm
|
|
desc: Small size
|
|
- class: badge-lg
|
|
desc: Large size
|
|
---
|
|
import BadgeList from '@ui/BadgeList.astro';
|
|
import Example from '@components/Example.astro';
|
|
import Badge from '@ui/Badge.astro';
|
|
import site from '@data/site.json';
|
|
|
|
export const colors = Object.entries(site.colors);
|
|
|
|
## Default markup
|
|
|
|
The default badges are square and come in the basic set of colors.
|
|
|
|
<Example centered>
|
|
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgeList>
|
|
</Example>
|
|
|
|
## Badge list
|
|
|
|
Use the `.badge-list` container whenever you show more than one badge next to each other. It keeps consistent spacing between items and wraps them when there is not enough space.
|
|
|
|
```html
|
|
<div class="badge-list">
|
|
<span class="badge">First</span>
|
|
<span class="badge">Second</span>
|
|
</div>
|
|
```
|
|
|
|
## Headings
|
|
|
|
A badge scales with the heading it sits in, from `<h1>` to `<h6>`, so it can mark a section as new or in beta.
|
|
|
|
<Example>
|
|
<h1>Example heading <Badge text="New" /></h1>
|
|
<h2>Example heading <Badge text="New" /></h2>
|
|
<h3>Example heading <Badge text="New" /></h3>
|
|
<h4>Example heading <Badge text="New" /></h4>
|
|
<h5>Example heading <Badge text="New" /></h5>
|
|
<h6>Example heading <Badge text="New" /></h6>
|
|
</Example>
|
|
|
|
## Light versions of badges
|
|
|
|
The `-lt` classes give a badge a light tint instead of a solid fill.
|
|
|
|
For example you can use the `bg-blue-lt` class to create a light blue badge. The class also sets the text color, so the label stays readable on the tint.
|
|
|
|
<Example centered>
|
|
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)}</BadgeList>
|
|
</Example>
|
|
|
|
## Pill badges
|
|
|
|
The `.badge-pill` class gives a badge fully rounded ends. Its width follows the label.
|
|
|
|
<Example centered>
|
|
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}</BadgeList>
|
|
</Example>
|
|
|
|
A pill with a number works as a counter, for example for unread messages.
|
|
|
|
<Example centered>
|
|
<BadgeList>{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}</BadgeList>
|
|
</Example>
|
|
|
|
## Badges with icons
|
|
|
|
A badge can hold an [icon](/ui/components/icon) in front of the text.
|
|
|
|
<Example centered>
|
|
<BadgeList>
|
|
<Badge text="Star" icon="star" />
|
|
<Badge text="Heart" icon="heart" />
|
|
<Badge text="Check" icon="check" />
|
|
<Badge text="X" icon="x" />
|
|
<Badge text="Plus" icon="plus" />
|
|
<Badge text="Minus" icon="minus" />
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
The icon can also go after the text.
|
|
|
|
<Example centered>
|
|
<BadgeList>
|
|
<Badge text="Star" iconEnd="arrow-right" />
|
|
<Badge text="Heart" iconEnd="arrow-right" />
|
|
<Badge text="Check" iconEnd="arrow-right" />
|
|
<Badge text="X" iconEnd="arrow-right" />
|
|
<Badge text="Plus" iconEnd="arrow-right" />
|
|
<Badge text="Minus" iconEnd="arrow-right" />
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
## Links
|
|
|
|
Put the badge classes on an `<a>` element to make the badge a link.
|
|
|
|
<Example centered>
|
|
<BadgeList>
|
|
<a href="#" class="badge bg-blue-lt">Blue</a>
|
|
<a href="#" class="badge bg-azure-lt">Azure</a>
|
|
<a href="#" class="badge bg-indigo-lt">Indigo</a>
|
|
<a href="#" class="badge bg-purple-lt">Purple</a>
|
|
<a href="#" class="badge bg-pink-lt">Pink</a>
|
|
<a href="#" class="badge bg-red-lt">Red</a>
|
|
<a href="#" class="badge bg-orange-lt">Orange</a>
|
|
<a href="#" class="badge bg-yellow-lt">Yellow</a>
|
|
<a href="#" class="badge bg-lime-lt">Lime</a>
|
|
<a href="#" class="badge bg-green-lt">Green</a>
|
|
<a href="#" class="badge bg-teal-lt">Teal</a>
|
|
<a href="#" class="badge bg-cyan-lt">Cyan</a>
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
## Button with badge
|
|
|
|
A badge inside a [button](/ui/components/button) or a link works as a counter. Add the `.badge-notification` class to pin it to the top right corner of the control.
|
|
|
|
A notification badge with no text is a small dot, which is enough to say that something is new.
|
|
|
|
<Example centered>
|
|
<div class="btn-list">
|
|
<button type="button" class="btn">Notifications <Badge text="2" color="red" class="ms-2" /></button>
|
|
<button type="button" class="btn">Inbox <Badge text="4" color="red" class="badge-notification" /></button>
|
|
<button type="button" class="btn">Profile <Badge text="" color="red" class="badge-notification" /></button>
|
|
</div>
|
|
</Example>
|
|
|
|
## Animated badges
|
|
|
|
The `.badge-blink` class makes a badge blink with a CSS animation, for a live status or something the user must notice.
|
|
|
|
<Example centered>
|
|
<button type="button" class="btn">Profile <Badge text="" color="red" class="badge-notification badge-blink" /></button>
|
|
</Example>
|
|
|
|
## Size options
|
|
|
|
Use `.badge-sm` or `.badge-lg` to change the size. The examples above use the default.
|
|
|
|
<Example centered vertical>
|
|
<BadgeList>
|
|
<Badge color="primary" size="sm" text="New" />
|
|
<Badge color="primary" size="sm" text="1" class="badge-pill" />
|
|
</BadgeList>
|
|
<BadgeList>
|
|
<Badge color="primary" text="New" />
|
|
<Badge color="primary" text="1" class="badge-pill" />
|
|
</BadgeList>
|
|
<BadgeList>
|
|
<Badge color="primary" size="lg" text="New" />
|
|
<Badge color="primary" size="lg" text="1" class="badge-pill" />
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
|
|
## Outline badges
|
|
|
|
Use `.badge-outline` for a badge with a border and no fill. Add a `text-*` class to set its color - the border follows the text.
|
|
|
|
<Example centered>
|
|
<BadgeList>
|
|
{colors.map(([name]) => (
|
|
<span class={`badge badge-outline text-${name}`}>{name}</span>
|
|
))}
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
## Dot badges
|
|
|
|
Use `.badge-dot` for a small dot with no text. It marks a state next to a label, so always keep that label readable next to it.
|
|
|
|
<Example centered>
|
|
<BadgeList>
|
|
<span class="badge badge-dot bg-green"></span>
|
|
<span class="badge badge-dot bg-yellow"></span>
|
|
<span class="badge badge-dot bg-red"></span>
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
## Icon-only badges
|
|
|
|
Use `.badge-icononly` when the badge holds nothing but an icon. It removes the horizontal padding, so the icon stays centered.
|
|
|
|
<Example centered>
|
|
<BadgeList>
|
|
<Badge color="primary" class="badge-icononly" icon="star" />
|
|
<Badge color="green" class="badge-icononly" icon="check" />
|
|
<Badge color="red" class="badge-icononly" icon="x" />
|
|
</BadgeList>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
A badge is text, not a control, so most of the work is in the words you put in it.
|
|
|
|
- A badge that only shows a color, such as `.badge-dot` or an empty notification badge, means nothing to a screen reader. Put the state in text next to it, or add an `aria-label` to the element it describes.
|
|
- Write counts so they make sense on their own: `4 unread messages` reads better than a bare `4`. Keep the short version visible and the full version in an `aria-label` when space is tight.
|
|
- A badge inside a button or a link is part of that control's name. Check how the whole control reads out loud before shortening the text.
|
|
- Color alone should never carry the meaning. Pair it with a word or an icon, the same way [statuses](/ui/components/status) do.
|
|
|
|
## More examples
|
|
|
|
More examples are in the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) and on the Tabler [Badges](https://preview.tabler.io/badges.html) preview page.
|