Badge
为 status、metadata 和 version hints 添加紧凑的内联标签。
Badge 是内联标签。适合放在正文、标题、cards 和紧凑 UI 中，用来让短状态或 metadata
靠近相关文本。
Import
import { Badge } from '@prosefly/astro-components';Inline Usage
Badges 设计为与文本保持在同一 baseline。它们不应该单独形成一个新的布局区域。
Lotus components 发布自 @prosefly/astro-components New，
也可以脱离 Lotus theme 独立使用 Stable。
Lotus components are published from `@prosefly/astro-components` <Badge color="accent">New</Badge>,and can be used independently from the Lotus theme <Badge color="success">Stable</Badge>.Common Patterns
使用 badges 显示支持附近内容的短标签。
Status
Search dialog Ready 支持键盘导航，而 page actions Experimental 可能在首个稳定版本前变化。
Version Hints
Lotus 支持 Astro v7 和 Tailwind CSS v4。
Heading Metadata
Package Exports Public API
Package 通过单一 entrypoint 从 @prosefly/astro-components 导出 components。
Variants
使用 variant 改变 badge 的视觉权重。
SolidSoftSubtleOutline
Colors
当 badge 传达状态时，使用 semantic colors。普通 metadata 使用 neutral。
NeutralAccentSuccessWarningDanger
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | 'solid' | 'soft' | 'subtle' | 'outline' | 'soft' | 选择视觉样式。 |
color | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | 选择语义颜色。 |
class | string | optional | 给外层 span 添加 classes。 |
Badge 也会将未知 attributes 传给外层 span，所以你可以按需添加 title、aria-label
或 data-*。
Syntax Rules
- Badge 文本应保持简短，通常一到三个词。
- 将 badges 与相关文本保持内联，不要把它们当作独立块。
- 不要把 badges 用作按钮或导航控件。
- 文档内容中优先使用
soft或subtle；solid留给高强调状态标签。
最后更新于 2026年7月18日
