Utilize o componente Status para fornecer informações visuais sobre a condição ou o progresso de uma tarefa, processo ou item específico. Este componente é crucial para manter os utilizadores informados sobre o estado atual das operações, ajudando na tomada de decisões e na gestão de expectativas.
Mostra o estado atual de um processo ou item de forma clara e imediata.
Pode ser representado por ícones, cores distintas ou pequenos textos.
Ajuda os utilizadores a entender rapidamente onde se encontram num processo e quais ações podem ser necessárias.
Incorpore o componente Status sempre que precisar comunicar o estado de elementos ou processos dentro da sua interface, melhorando a experiência do utilizador e oferecendo uma orientação visual clara.
<div class="gra-status primary alertIcon">
<i class="icon-warning"></i>
<span>Alerta</span>
</div>
<div class="gra-status primary infoIcon">
<i class="icon-circle-info"></i>
<span>Information</span>
</div>
<div class="gra-status primary dangerIcon">
<i class="icon-circle-minus"></i>
<span>Perigo</span>
</div>
<div class="gra-status primary successIcon">
<i class="icon-circle-success"></i>
<span>Sucesso</span>
</div>
<div class="gra-status secondary alertIcon">
<span class="icon"></span>
<span>Alerta</span>
</div>
<div class="gra-status secondary infoIcon">
<span class="icon"></span>
<span>Information</span>
</div>
<div class="gra-status secondary dangerIcon">
<span class="icon"></span>
<span>Perigo</span>
</div>
<div class="gra-status secondary successIcon">
<span class="icon"></span>
<span>Sucesso</span>
</div>