mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny WhiteandJoshen Lim
031b227165
* component clean up * optically center * docs and type size * code badge variant * sensible defaults * fix product menu flex * badge sweep * new project badges * logs * compute badge * studio badge sweep * www sweep * docs sweep * clean up * fixes * cleanup * fixes * better docs * fixes * misc fixes * consistency * Minor fixes for issues i found * simplify mt-0 * mt simplification * remaining optical alignment --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
38 lines
1.1 KiB
Plaintext
38 lines
1.1 KiB
Plaintext
---
|
|
title: Badge
|
|
description: Add contextual metadata to another item.
|
|
component: true
|
|
---
|
|
|
|
Badge displays contextual information such as surrounding state or product category. Its purpose should be be self-evident based on surrounding context.
|
|
|
|
<ComponentPreview name="badge-demo" peekCode />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Badge } from '@/components/ui/badge'
|
|
```
|
|
|
|
```tsx
|
|
<Badge variant="default">Default</Badge>
|
|
```
|
|
|
|
Avoid altering the Badge style, such as text case or roundedness. Consistent implementation makes Badge immediately recognizable throughout Supabase for denoting state or category. Use or create another component for other use cases, such as compute size and status.
|
|
|
|
Keep Badge text to one or two words as it is designed to support other elements, not as a primary communication aid.
|
|
|
|
Badge is designed to stand out, so should be used sparingly.
|
|
|
|
## Examples
|
|
|
|
### States
|
|
|
|
<ComponentPreview name="badge-state" peekCode />
|
|
|
|
### Secondary
|
|
|
|
A content-only variant similar to the `text` variant of [Button](../components/button#types).
|
|
|
|
<ComponentPreview name="badge-secondary" peekCode />
|