Componentes

Alert

Componente usado geralmente para notificar erros internos do sistema.


O que é?

Comunica ao usuário informações que afetem várias ferramentas simultaneamente ou a plataforma completa. O componente deve conter um status associado e sempre ser dispensável.

É usado geralmente para notificar erros internos do sistema. Por exemplo: um canal está momentaneamente indisponível.

Use apenas um alert por vez na plataforma.

Caso o cenário que esteja trabalhando não se encaixe nessa descrição ou o alert já esteja sendo utilizado para um caso mais grave, veja o componente hint box. Ir para hint box >

Anatomia

1. Contêiner

Comporta todos os elementos do hint box.

2. Ícone de feedback

Varia de acordo com o status do componente.

3. Label

Deve conter uma mensagem curta e direta.

Button link é usado para encaminhar para outras páginas, seja dentro da plataforma ou não. Button text é usado para abrir modais ou modificações na página, como atualizar.

5. Ícone de remoção

Fecha o hint e move o restante do conteúdo para cima.

Tipos de alert

Status

Apenas alguns status de feedback estão disponíveis para este componente. Por se tratar de um componente persistente e que ocupa um espaço importante na interface, indicamos seu uso apenas em casos extremos. Como para erros, avisos de alerta e, em caso de muita necessidade, informações essenciais. Veja abaixo as variações possíveis.

Warning

Alerta de nível médio. Avisos que precisam da atenção do usuário.

<div class="alert is-warning">
  <div class="alert-content">
    <span class="icon is-medium">
      <i class="fak fa-warning-medium"></i>
    </span>
    <label>Label</label>
  </div>
  <div class="alert-action">
    <a>Button Text</a>
    <a class="close-button">
      <span class="is-medium">
        <i class="fak fa-close-medium"></i>
      </span>
    </a>
  </div>
</div>

Danger

Alerta de nível alto. Erros, problemas no sistema, ações críticas.

<div class="alert is-danger">
  <div class="alert-content">
    <span class="icon is-medium">
      <i class="fak fa-error-medium"></i>
    </span>
    <label>Label</label>
  </div>
  <div class="alert-action">
    <a>Button Text</a>
    <a class="close-button">
      <span class="is-medium">
        <i class="fak fa-close-medium"></i>
      </span>
    </a>
  </div>
</div>

Info

Alerta neutro. Mensagens sobre a empresa ou plataforma que devem ser enviadas por questões jurídicas ou que impactem na área Financeira do cliente. É raramente usado.

Antes de aplicar o alert com status info, considere se é uma opção melhor utilizar o hint box com status info

Ir para hint box >

<div class="alert is-dark">
  <div class="alert-content">
    <span class="icon is-medium">
      <i class="fak fa-info-medium"></i>
    </span>
    <label>Label</label>
  </div>
  <div class="alert-action">
    <a>Button Text</a>
    <a class="close-button">
      <span class="is-medium">
        <i class="fak fa-close-medium"></i>
      </span>
    </a>
  </div>
</div>

Por que o Sirius não possui alert com status success?

Utilizando o Clarity Design System como referência, o Sirius parte do princípio de que mensagens de sucesso devem ser entregues no contexto da tarefa, dentro da área de conteúdo. Por isso, os componentes adequados para feedbacks de sucesso são o toast (feedbacks síncronos) o hint box (feedbacks assíncronos).

Aplicação

Comportamento

O alert empurra o conteúdo para baixo quando aparece na tela e puxa para cima quando é dispensado.

Exemplos

O componente deve ocupar 100% da largura da tela e não apenas a área da grid.

Grid com Menu Lateral

Grid sem Menu Lateral