Badges

Badges são utilizadas para adicionar informações a um conteúdo, chamar a atenção do usuário para notificações não visualizadas ou sinalizar o status de alguma tarefa. Desta forma, é necessário que o componente seja adaptável. Existem três variações padrões para as badges. Elas devem atender de maneira específica cada caso.

Status badge

Modo rápido de verificar e sinalizar o status de um recurso ou tarefa.

<div class="tags">
  <span class="badge">
    <span class="icon is-medium">
      <i class="fak fa-info-medium"></i>
    </span>
    <span>Default</span>
  </span>

  <span class="badge is-success is-light">
    <span class="icon is-medium">
      <i class="fak fa-success-medium"></i>
    </span>
    <span>.is-success</span>
  </span>

  <span class="badge is-warning is-light">
    <span class="icon is-medium">
      <i class="fak fa-warning-medium"></i>
    </span>
    <span>.is-warning</span>
  </span>

  <span class="badge is-danger is-light">
    <span class="icon has-text-danger is-medium">
      <i class="fak fa-error-medium"></i>
    </span>
    <span>.is-danger</span>
  </span>
</div>

A Status badge possui três versões: small, medium e large. Por padrão, a versão medium e large devem ter prioridade na aplicação. A versão small tem seu uso restrito em situações onde não é possível aplicar as anteriores.

Notification badge

Indicador de valores numéricos, como contagens e pontuações. Tem como função chamar atenção para novas informações e notificações não lidas. Existem duas versões: uma textual e outra numeral. Badges de Notificações devem ficar próximas do componente ou conteúdo a que se refere.

<!-- Textual -->
<span class="badge is-primary is-light is-small">New</span>

<!-- Numérica -->
<span class="badge is-danger" data-value="1"></span>
<span class="badge is-danger" data-value="23"></span>
<span class="badge is-danger is-small" data-value="6"></span>

Aplicação

As badges são usadas para indicar status, informar ou associar informações. Esses indicadores não são clicáveis e nem podem ser excluídos. É possível adicionar uma tooltip, preferencialmente na versão small. Deve ser usada quando não há espaço para aplicar a versão medium ou large.

Esse componente é aconselhável em situações onde é preciso indicar a situação dependendo do contexto. Exemplo: pendente, concluído, não enviado…

Badges são componenetes sucintos que representam a informação de forma simples e direta. Devem ter uma relação clara e útil com o conteúdo ou a tarefa que representam.

<aside class="menu">
  <p class="menu-label">Dashboard operacional</p>
  <ul class="menu-list">
    <li><a>Visão geral</a></li>
    <li>
      <a>
        <span>Meus relatórios</span>
        <span class="badge">Novo</span>
      </a>
    </li>
    <li>
      <a>
        <span>Exportados</span>
        <span class="badge is-danger" data-value="3"></span>
      </a>
    </li>
  </ul>
</aside>

Acessibilidade

As badges são uma boa escolha para indicar a situação e o contexto de determinado conteúdo da página. É importante se ater as cores usadas e ao seu significado semântico. Para saber mais, acesse as diretrizes de Cor no menu Fundamentos no DSM. Outro quesito importante é o texto usado, que deve ser direto e claro. É importante criar padrões de comunicação, ou seja, utilize os mesmos termos para manter um padrão de linguagem.