Badges

Utilizando Badges

Badges são pequenas etiquetas que podemos usar para destacar um status, uma versão ou uma novidade.

Utilizo Badges para marcar conteúdos como Novo, Beta ou Obsoleto.

Importando Badges no arquivo mdx

Após o título do arquivo mdx, coloque o seguinte import:

import { Badge } from '@astrojs/starlight/components';

Criando um badge simples

Por padrão o badge usa a cor de destaque do site:

Padrão

<Badge text="Padrão" />

Variantes de cores

Podemos usar a propriedade variant para escolher a cor do badge:

Note Success Tip Caution Danger

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="Danger" variant="danger" />

Tamanhos

Podemos usar a propriedade size para alterar o tamanho do badge:

Small Medium Large

<Badge text="Small" variant="success" size="small" />
<Badge text="Medium" variant="success" size="medium" />
<Badge text="Large" variant="success" size="large" />

Badge dentro de títulos

Podemos colocar um badge ao lado de um título para destacar uma novidade:

## Nova funcionalidade <Badge text="Novo" variant="success" />

Nova funcionalidade Novo

Estilo personalizado

Podemos usar a propriedade style para criar um badge com cores próprias:

Personalizado

<Badge text="Personalizado" variant="note" style={{ fontStyle: 'italic' }} />

Podemos adicionar um badge em uma página específica do menu lateral usando o frontmatter do arquivo:

---
title: Minha página
sidebar:
  badge:
    text: Novo
    variant: success
---

Para adicionar um badge em um tópico do starlight-sidebar-topics, use a propriedade badge no astro.config.mjs:

{
  label: 'Neovim IDE',
  link: '/neovim/intro',
  badge: { text: 'Novo', variant: 'success' },
  items: [],
}