Core Primitives
基础组件覆盖布局、操作、状态反馈三个层面。每个例子都给出最小可复用写法。
Buttons & Intent
通过 `tone` 和 `variant` 表达语义,不再依赖零散颜色类名。
<Button tone="brand">Publish</Button>
<Button tone="neutral" variant="soft">Save Draft</Button>
<Button tone="danger" variant="outline">Delete</Button>
<Button tone="inverse">Preview</Button>Card Composition
卡片负责信息分组,Chip 负责状态标签,组合后即可快速形成内容面板。
Article Status
DraftReviewBlockedPublished
<Card tone="neutral">
<CardBody>
<Chip value="Review" tone="brand" />
</CardBody>
</Card>Actions, Tooltip, Loading
图标按钮用于高频操作,Tooltip 提供上下文,Spinner 负责异步反馈。
<Tooltip content="GitHub">
<IconButton tone="neutral" aria-label="github">
<Github className="size-5" />
</IconButton>
</Tooltip>Alert Feedback
Save failed. Please check your network and retry.
Tokens synced successfully.
<Alert open tone="danger">
Save failed. Please check your network and retry.
</Alert>