Badge

Dengan Badge, Anda dapat menambahkan status pada heading. Misalnya, ini dapat berguna untuk menentukan jenis bagian, atau versi yang didukung.

Penggunaan

Anda dapat menggunakan komponen Badge yang tersedia secara global.

### Judul <Badge type="info" text="default" />
### Judul <Badge type="tip" text="^1.9.0" />
### Judul <Badge type="warning" text="beta" />
### Judul <Badge type="danger" text="caution" />

Kode di atas menghasilkan tampilan seperti:

Title default

Title ^1.9.0

Title beta

Title caution

Custom Children

<Badge> menerima children, yang akan ditampilkan di dalam badge.

### Judul <Badge type="info">custom element</Badge>

Title custom element

Menyesuaikan Warna Tipe

Anda dapat menyesuaikan gaya badge dengan menimpa variabel css. Berikut adalah nilai default:

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-brand-1);
  --vp-badge-tip-bg: var(--vp-c-brand-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

<Badge>

Komponen <Badge> menerima props berikut:

interface Props {
  // Ketika `<slot>` diberikan, nilai ini diabaikan.
  text?: string

  // Default ke `tip`.
  type?: 'info' | 'tip' | 'warning' | 'danger'
}