O que é?

A modal é uma caixa de conteúdo sobreposta a interface. É usada quando precisa fornecer uma mensagem, informações críticas ou solicitar uma decisão. O restante da interface fica bloqueada enquanto alguma ação não for executada.

Anatomia

1. Janela

Shape em formato retangular que sobrepõem a tela. Tem a mesma cor do background da página e possui shadow;

2. Título

Referente ao assunto. Representa a finalidade da modal e deve ser objetivo e condizente com o assunto. Pode ser uma pergunta se o tema assim exigir;

3. Conteúdo

O conteúdo pode variar de acordo com o uso. Modal de texto terá apenas texto. Em outras variações é possível que outros componentes do Sirius sejam aplicados.

4. Botões de ação

O uso de botões é obrigatório. Eles fornecem ações como “sim” e “não”.

5. Fechar

Um botão de fechar em formato de ícone e sair rapidamente da modal.

Tipos de Modal

A modal possui cinco versões: text modal, content modal, extended modal, drawer modal default e drawer modal small.

No Figma, recomendamoso uso do fundo com o token Opacity/Darkest para todas as modais.

Text modal

A modal de texto é usada para informar a pessoa usuária ou solicitar a confirmação de uma ação. Essa ação pode ser destrutiva. Ex.: excluir permanentemente.

É comum modais serem steps de decisão onde cada escolha dará em um caminho diferente do fluxo. Por mais que sejam duas opções com mesmo nível de importância a ser tomada, sempre haverá uma primária e outra secundária. Exemplo: Permitir acesso a localização? Permitir (Primária) ou Negar (Secundária).

É a menor modal e aceita somente texto. Deve ser posicionada centralizada na tela.

<button type="button" class="button" data-toggle="modal" data-target="#modal-example-confirm">Abrir text modal</button>

<div id="modal-example-confirm" class="modal is-text" role="dialog">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <span class="modal-card-title">Title</span>
      <button class="delete is-medium" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </section>
    <footer class="modal-card-foot is-centered">
      <a class="button">Secondary</a>
      <a class="button is-primary">Primary</a>
    </footer>
  </div>
</div>

Content modal

Modal default. Indicada para conteúdos curtos, em geral, utiliza componentes não muito complexos como text fields e selections.

Aceita texto e componentes como text fields, hint boxes, steps e selections (checkboxes, radio buttons e switches). Deve ser posicionada centralizada na tela.

<button type="button" class="button" data-toggle="modal" data-target="#modal-example2">Abrir content modal</button>
<div id="modal-example2" class="modal" role="dialog">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <span class="modal-card-title">Title</span>
      <button class="delete is-medium"></button>
    </header>
    <section class="modal-card-body">
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
        </p>
      </div>
    </section>
    <footer class="modal-card-foot">
      <a class="button">Secondary</a>
      <a class="button is-primary">Primary</a>
    </footer>
  </div>
</div>

Extended modal

É indicada apenas em casos onde o conteúdo for extenso demais para ser comportado na modal média.

É a maior modal dentre as centralizadas em tela. Aceita texto e componentes como text fields, hint boxes, steps e selections (checkboxes, radio buttons e switches).

<button type="button" class="button" data-toggle="modal" data-target="#modal-example3">Abrir extended modal</button>
<div id="modal-example3" class="modal is-extended" role="dialog">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <span class="modal-card-title">Title</span>
      <button class="delete is-medium"></button>
    </header>
    <section class="modal-card-body">
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
        </p>
      </div>
    </section>
    <footer class="modal-card-foot">
      <a class="button">Secondary</a>
      <a class="button is-primary">Primary</a>
    </footer>
  </div>
</div>

Drawer modal small

Pequenas configurações e acesso a apps externos. Use em situações onde não é possível aplicar a drawer modal default, como em telas pequenas ou em casos que necessitem usar essa modal de forma a encaixar em outros componentes do fundo.

Aceita texto e componentes como text fields, hint boxes, steps e selections (checkboxes, radio buttons e switches). Exemplo de uso: é usada para configurações no app da Sirena.

<button type="button" class="button" data-toggle="modal" data-target="#modal-example4">Abrir modal drawer small</button>
<div id="modal-example4" class="modal is-drawer is-small" role="dialog">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <span class="modal-card-title">Title</span>
                <button class="delete is-medium"></button>
            </header>
            <section class="modal-card-body">
                <div class="columns">
                    <div class="column">
                        <div class="content">
                            <h3>Modal drawer small</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot">
                <a class="button is-primary">Primary</a>
                <a class="button">Secondary</a>
            </footer>
        </div>
    </div>

Drawer modal default

A modal drawer é usada para conteúdos complexos ou extensos. Use quando precisar redirecionar o usuário temporariamente para um sub-fluxo referente ao fluxo principal por um curto período e após esse tempo retorne imediatamente.

Aceita texto e componentes como text fields, hint boxes, steps e selections (checkboxes, radio buttons e switches).

<button type="button" class="button" data-toggle="modal" data-target="#modal-example5">Abrir modal drawer default</button>
<div id="modal-example5" class="modal is-drawer" role="dialog">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <span class="modal-card-title">Title</span>
      <button class="delete is-medium"></button>
    </header>
    <section class="modal-card-body">
      <div class="columns">
        <div class="column is-half">
          <p>
            <img src="/img/sirius.svg">
          </p>
        </div>
        <div class="column is-half">
          <div class="content">
            <h3>Modal grande com duas colunas</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
            </p>
          </div>
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <a class="button">Secondary</a>
      <a class="button is-primary">Primary</a>
    </footer>
  </div>
</div>

Aplicação

As modais são componentes que bloqueiam a tela, exigindo que os usuários parem sua tarefa atual. Elas devem ser usadas ​​com moderação, pois nem todas as opções ou configurações justificam a interrupção. Aplique-as para solicitar informações que estão impedindo o usuário de prosseguir com o fluxo. Entre outros tipos de uso estão: transmitir informações urgentes ou confirmar ação do usuário.

Acessibilidade

A modal mantêm o foco até ser dispensada ​​ou uma ação ser executada, como escolher uma configuração. O fundo recebe uma camada escura preta 50% de opacidade para dar destaque a modal.

Responsividade e adaptabilidade

Para os breakpoints de mobile e tablet, recomendamos a utilização de modais e outros componentes nativos dos sistemas operacionais.

Sirius Design System	Could be in Material Design	Could be in iOS
Text modal	Alert Dialog	Alert
Content modal	Simple Dialog / Confirmation dialog / Full-screen dialog	Activity views
Extended modal	Simple Dialog / Confirmation dialog / Full-screen dialog	Sheets
Drawer modal small	Simple Dialog / Confirmation dialog / Full-screen dialog	Toolbar / Sharing and actions / Sheets
Drawer modal default	Full-screen dialog	Toolbar / Sheets

Boas práticas

• Evite usar modais para mostrar informações que não são essenciais ou que não têm relação com o fluxo que está sendo navegado.
• Evite solicitar que o usuário tome decisões em modais quando necessitam informações adicionais que não estão dentro dela.
• Se é necessário que o usuário use muito tempo preenchendo informações, é melhor colocar o conteúdo em uma página e não em uma modal. Se isso não for uma opção, considere usar steps e salvar o fluxo por etapas.