Badge - Vant 4
Badge
🏷️ Want to grab attention with style? Let's dive into the Badge component!
Intro 📖
A tiny but mighty component that displays eye-catching badges or notification dots! 🔴 Perfect for showing unread messages, notifications, or any important status that deserves a spotlight! ✨
Install 📦
Ready to add some flair? Register the component globally via app.use - it's super easy! 🎯 Check out our Component Registration guide for more installation magic.
import { createApp } from'vue'; import { Badge } from'vant'; const app = createApp(); app.use(Badge);Usage 🎮
Basic Usage ⚡
Max 🔢
Keep things tidy! When numbers get too big, the badge automatically shows a neat "99+" format. No more overwhelming your users with huge numbers! 📊
Custom Color 🎨
Express yourself! Change the badge color to match your brand or mood. Red for urgent, blue for info, green for success - the choice is yours! 🌈
Custom Content 🎭
Get creative! Use the content slot to add custom icons, text, or whatever your imagination dreams up! ✨
.badge-icon { display: block; font-size: 10px; line-height: 16px; }Custom Position 📍
Location, location, location! Use the position prop to place your badge exactly where it needs to be. Top-left, bottom-right, or anywhere in between! 🎯
Standalone 🌟
Sometimes badges need their independence! Use them standalone without wrapping other elements - perfect for status indicators and labels! 🏷️
API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| content | Badge content (Effective when dot is false) | *number | string* |
| color | Background color | string | #ee0a24 |
| dot | Whether to show dot | boolean | false | | max | Max value, show {max}+ when exceed, only works when content is number | number | string | - | | offset | Offset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | [number | string, number | string] | - | | show-zero | Whether to show badge when content is zero | boolean | true | | position | Badge position, can be set to top-left``bottom-left``bottom-right | string | top-right |
Slots
| Name | Description |
|---|---|
| default | Default slot |
| content | Custom badge content |
Types
The component exports the following type definitions:
importtype { BadgeProps, BadgePosition } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-badge-size | 16px | - |
| --van-badge-color | var(--van-white) | - |
| --van-badge-padding | 0 3px | - |
| --van-badge-font-size | var(--van-font-size-sm) | - |
| --van-badge-font-weight | var(--van-font-bold) | - |
| --van-badge-border-width | var(--van-border-width) | - |
| --van-badge-background | var(--van-danger-color) | - |
| --van-badge-dot-color | var(--van-danger-color) | - |
| --van-badge-dot-size | 8px | - |
| --van-badge-font | -apple-system-font, Helvetica Neue, Arial, sans-serif | - |