Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de status

Última atualização:

Indicador de pontos de status Tailwind CSS somente CSS com variantes de cores primárias, de sucesso, de aviso e de erro. Tamanhos xs-xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes de status exibem o estado atual ou a disponibilidade de usuários, sistemas ou processos por meio de indicadores visuais. Construídos com HTML semântico e estilo codificado por cores, os emblemas de status comunicam informações importantes sobre o estado. O sistema de status Frutjam oferece suporte a várias cores e tamanhos – ideal para presença do usuário, integridade do sistema e estados do fluxo de trabalho.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
statusBaseIndicador de ponto pequeno para estado ou presença
status-xsTamanhoExtra pequeno
status-smTamanhoPequeno
status-mdTamanhoMédio (padrão)
status-lgTamanhoGrande
status-xlTamanhoExtra grande
status-primaryCorCor do tema principal
status-secondaryCorCor do tema secundário
status-accentCorCor do tema de destaque
status-neutralCorCor neutra do tema
status-infoCorCor semântica da informação
status-successCorCor semântica de sucesso
status-warningCorCor semântica de aviso
status-errorCorCor semântica do erro

Uso Básico

<span class="status"></span>

<span className="status"></span>

Cores de status

html 
1
2
3
4
5
6
7
8
<span class="status status-primary"></span>
<span class="status status-secondary"></span>
<span class="status status-accent"></span>
<span class="status status-neutral"></span>
<span class="status status-info"></span>
<span class="status status-success"></span>
<span class="status status-warning"></span>
<span class="status status-error"></span>

Tamanhos de status

html 
1
2
3
4
<span class="status status-xs status-success"></span>
<span class="status status-sm status-success"></span>
<span class="status status-md status-success"></span>
<span class="status status-lg status-success"></span>

Status com rótulo

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="flex items-center gap-2">
  <span class="status status-md status-success"></span>
  <span>Online</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-neutral"></span>
  <span>Offline</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-error"></span>
  <span>Busy</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-warning"></span>
  <span>Away</span>
</div>

Status com animação Ping

html 
<div class="status status-error animate-ping"></div>

Status com animação de salto

html 
1
2
3
4
<div class="flex items-center gap-2">
  <div class="status status-info animate-bounce"></div>
  <span>Unread emails</span>
</div>

Status na lista de usuários

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="space-y-2">
  <div class="flex items-center gap-2">
    <div class="avatar avatar-online">
      U1
    </div>
    <span>John (Online)</span>
  </div>
  <div class="flex items-center gap-2">
    <div class="avatar avatar-offline">
      U2
    </div>
    <span>Jane (Offline)</span>
  </div>
  <div class="flex items-center gap-2">
    <div class="avatar avatar-busy">
      U3
    </div>
    <span>Bob (Busy)</span>
  </div>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Status e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP