---
# System prepended metadata

title: Objetivo

---

![](https://i.imgur.com/HLJeV1R.jpg)


# Objetivo

Essa issue especifica um conjunto de templates para o atual componente BBBottomSheet. Eles foram baseados nos estudos e discussões que tivemos nas últimas semanas e se dividem em dois grupos: Bottom Sheets informativas e Bottom Sheets de ação.

As Bottom Sheets informativas devem substituir as atuais dialogs (BBAlert). Por fornecer mais espaço para conteúdo, esse template vai nos permitir oferecer ao usuário instruções e ações mais claras nos momentos em que precisamos da sua atenção.

Isso é importante porque uma das limitações conhecidas das nossas atuais dialogs é o limitado espaço para conteúdo — especialmente para os labels dos botões — o que acaba implicando em instruções pouco claras e ações  ambíguas.

Já as Bottom Sheets de ação oferecem uma alternativa para situações em que precisamos de uma ação pontual do usuário durante uma tarefa, como a escolha de uma data ou de uma opção numa lista. Esse template vai nos permite desenhar experiências mais simples e focadas, ao pedir dados aos usuário sem que ele perca o contexto da tarefa principal.

E, por estarem fixos na base da tela, ambos os tipos de Bottom Sheets favorecem alcançabilidade, especialmente em telas maiores.

## Bottom Sheets informativas
Bottom Sheets informativas são úteis em casos em que precisamos interromper o usuário com o alguma aviso importante ou erro.

![](https://i.imgur.com/pp7cwLI.jpg)


### Alerta ([Specs](https://marvelapp.com/24276j0g/screen/70368078))
- Avisos gerais, novidades ou outras informações úteis na abertura do app ou antes do uso de uma funcionalidade
- Informações adicionais sobre algum dado da UI, como mais detalhadas sobre uma termo, taxa ou valor
- Mensagens rápidas de sucesso, como “Seu dispositivo está liberado”

### Erros ou confirmações críticas ([Specs](https://marvelapp.com/24276j0g/screen/70857047))
- Erros gerais como senha incorreta, senha bloqueada ou saldo insuficiente
- Confirmações de ações destrutivas como excluir categoria financeira ou cancelar uma operação

### Considerações
- O ícone acima do título é opcional
- O texto acima do título (lead) é opcional
- O texto de descrição é opcional
- O caption abaixo da descrição é opcional (útil para código de erros)
- Os botões do rodapé podem ser dispostos em colunas ou linhas
- O rodapé pode conter no máximo 2 botões

---

## Bottom Sheets de ação
Para uso em situações em que precisamos de um ação ou dado pontual do usuário, como a seleção de uma data, de um item numa lista, ou avaliação de satisfação, por exemplo.

![](https://i.imgur.com/c8JhiaA.jpg)

### Lista ([Specs](https://marvelapp.com/24276j0g/screen/70368088))
Bottom Sheets com listas podem podem ser usadas para oferecer um grupo limitado de opções ao usuário. Como não há botão de confirmar nesse template, ele é adequado para seleção de opções não sensíveis, em que continuar sem confirmar não gera risco ou frustração.

- Listar opções adicionais de um menu (menu overflow)
- Listar formas de upload de arquivos (galeria, câmera)

### Lista com radio button ([Specs](https://marvelapp.com/24276j0g/screen/70368090))
Bottom Sheets de lista com radio buttons exigem que o usuário confirme o item selecionado tocando no botão “Confirmar”. São úteis quando precisamos que o usuário selecione uma opção sensível, e em que continuar sem confirmar pode gerar risco ou frustração.

- Escolher o titular da conta
- Escolher um cartão de crédito
- Escolher número de parcelas

### Lista em grid ([Specs](https://marvelapp.com/24276j0g/screen/70368073))
Úteis para quando as opções oferecidas se comportam melhor no formato grid, por conta do uso de espaço e organização visual geral.

- Selecionar uma categoria financeira
- Selecionar um modalidade de produto
- Selecionar um segmento (pessoa física, jurídica)

### Date picker ([Specs](https://marvelapp.com/24276j0g/screen/70368072))
Bottom Sheets com pickers de data exibem uma visão completa de calendário. São úteis em situações em que é preciso selecionar um range de data, ou quando mostrar visão completa de dias, meses e semanas ajuda o usuário na escolha.

- Selecionar uma data para agendamento de uma transação
- Adicionar um evento na agenda financeira
- Selecionar datas ida de volta na compra de passagens

### Lista com busca ([Specs](https://marvelapp.com/24276j0g/screen/70368089))
Úteis para situações em que a lista de opções é muito longa e/ou é preciso buscar dados do servidor.

- Encontrar uma cidade, loja ou agência
- Encontrar um contato para transferência
- Encontrar um lançamento no extrato

### Considerações

- O ícone de fechar é obrigatório em Bottom Sheets de ação
- O texto de descrição abaixo do título é opcional ([exemplo](https://marvelapp.com/24276j0g/screen/70655605))
- O ícone nos itens de lista é opcional

---

## Outras especificações
- Se ainda não foi implementado, seria útil se as Bottom Sheets incluíssem uma propriedade para definir se ela deve ou não fechar quando o usuário toca no overlay
- O ícone de fechar do canto superior direito é usado apenas nas Bottom Sheets de ação. Em Bottom Sheets informativas, o componente é fechado pelos botões no rodapé. O comportamento durante rolagem e outras métricas gerais estão [aqui](https://marvelapp.com/24276j0g/screen/70655287).