Tag

Utilize o componente Tag para categorizar ou marcar elementos específicos dentro de uma interface, como itens de uma lista, entradas em um banco de dados ou funcionalidades em um software. Este componente é eficaz para ajudar os utilizadores a identificar rapidamente características ou propriedades comuns entre diferentes itens.

Características Principais

Identificação Rápida

Facilita o reconhecimento imediato de categorias ou características associadas a um item.

Visualmente Distinto

Pode ser estilizado com cores, ícones ou variações de tamanho para destacar a importância ou o tipo de informação.

Organização e Filtragem

Auxilia na organização visual do conteúdo e oferece um meio eficaz para filtrar itens baseados em atributos específicos.

Exemplo de Utilização

• Em sistemas de gestão de conteúdo para marcar artigos com temas específicos.
• Em aplicações de e-commerce para indicar promoções ou características especiais de produtos.
• Em plataformas de gestão de projetos para categorizar tarefas por status ou prioridade.

Incorpore Tags sempre que precisar de uma forma simples e eficaz para categorizar e destacar informações em uma interface, melhorando a organização visual e a usabilidade para os utilizadores.

                                                    
<span class="gra-tag primary alert">Alerta</span>

<span class="gra-tag primary info">Informação</span>

<span class="gra-tag primary danger">Perigo</span>

<span class="gra-tag primary success">Sucesso</span>
                                                    
                                                

                                                    
<div class="gra-tag primary alert withIcon">
    <i class="icon-warning"></i><span>Alerta</span>
</div>

<div class="gra-tag primary info withIcon">
    <i class="icon-circle-info"></i><span>Informação</span>
</div>

<div class="gra-tag primary danger withIcon">
    <i class="icon-circle-minus"></i><span>Perigo</span>  
</div>

<div class="gra-tag primary success withIcon">
    <i class="icon-circle-success"></i><span>Sucesso</span>
</div>
                                                    
                                                

                                                        
<span class="gra-tag secondary alert">Alerta</span>
    
<span class="gra-tag secondary info">Informação</span>

<span class="gra-tag secondary danger">Perigo</span>

<span class="gra-tag secondary success">Sucesso</span>
                                                        
                                                    

                                                        
<div class="gra-tag secondary alert withIcon">
    <i class="icon-warning"></i><span>Alerta</span>
</div>
    
<div class="gra-tag secondary info withIcon">
    <i class="icon-circle-info"></i><span>Informação</span>
</div>
    
<div class="gra-tag secondary danger withIcon">
    <i class="icon-circle-minus"></i><span>Perigo</span>
</div>
    
<div class="gra-tag secondary success withIcon">
    <i class="icon-circle-success"></i><span>Sucesso</span>
</div>
                                                        
                                                    

                                                        
<span class="gra-badge alert">1</span>
    
<span class="gra-badge info">1</span>

<span class="gra-badge danger">1</span>
    
<span class="gra-badge success">1</span>