CSS: badge ​

.instui-badge — Um pequeno ponto de contagem ou status posicionado sobre o canto de um alvo.

Para posicionar um badge sobre um alvo, envolva ambos em um .instui-badge-wrapper (a âncora de posição) e prenda o badge com um modificador -placement-*.

Source: badge.css

Uso ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/badge.css";

Demonstração ​

Exemplos ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

Estrutura ​

O badge é renderizado em linha por si só, ou dentro de um instui-badge-wrapper opcional que o ancora sobre um alvo.

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores ​

ModificadorDescrição
.-color-dangerUma contagem de atenção/erro.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successUma contagem positiva/concluída.
.-placement-bottom-endPosição no canto inferior-final.
.-placement-bottom-startPosição no canto inferior-inicial.
.-placement-end-centerPosição centralizada na borda final.
.-placement-start-centerPosição centralizada na borda inicial.
.-placement-top-endPosição no canto superior-final.
.-placement-top-startPosição no canto superior-inicial.
.-pulseUm anel de atenção pulsante.
.-standaloneRenderize em linha, não posicionado sobre o canto de um alvo.
.-type-notificationApenas um ponto, sem contagem.

Pseudo-elementos ​

Pseudo-elementoDescrição
::beforeO anel de atenção pulsante desenhado na cor de destaque do badge (a variante -pulse).

Propriedades personalizadas ​

PropriedadeTipoPadrãoDescrição
--pantoken-badge-accent<color>—O preenchimento do chip; cada variante -color-* e o anel de pulso são lidos a partir dele.
--pantoken-badge-text<color>—A cor do texto, pareada ao destaque para manter a legibilidade.

Animações ​

AnimaçãoDescrição
pantoken-badge-pulseA animação do anel de pulso.

Tokens consumidos ​

TokenTipoValor
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

Relacionado ​

  • pill — O contraponto inline de rótulo-chip.