Bottom Sheet

Surge de forma contextual para oferecer opções e informações relevantes exatamente quando o usuário precisa, sem interromper seu fluxo de trabalho e mantendo visível a tela de fundo.

Figma

---

Uso

• Adicione o componente de “Bottom Sheet” em um auto layout com a largura da tela e altura definida de acordo com o contexto (Expandable, Fit-content, Full-screen)

• Ative a opção "Ignore auto layout"

• Altere o Resize Mode do componente "Bottom Sheet" para “Scale” e altere manualmente seu tamanho para o desejado

• Adicione o conteúdo normalmente e o componente se adaptará automaticamente

OBS: Sempre aplique o componente de "Top Bar" no topo do auto layout que contem a Bottom Sheet

✅ Do

• Bottom Sheets podem ser apenas utilizadas juntamente com as variantes "Drag Handle" ou "Empty" da Top Bar

❌ Don't

• Bottom Sheets não podem ser utilizadas com a barra verde

Use Cases

Overflow

Sort

Os use cases podem ser divididos em três categorias: Fit-content, Full-screen e Expandable

• Expandable sheet

  • Abre em 50% da tela como preview

  • Em caso de arrasto, expande até 100% da tela com animação “expansão da sheet”

  • Ao arrastar para baixo, com intenção de fechar, a sheet scrolla até o topo e é fechada sem voltar ao estágio inicial em que ocupa metade da tela

• Fit-Content Sheet

  • Não é expansível e se adapta de acordo com a quantidade de conteúdo

  • Altura máxima de 75% do tamanho da tela

• Full-Screen Sheet

  • Ocupa todo espaço disponível da tela

  • Utilizada em casos que existe scroll de tamanho máximo indefinido na sheet

Animação

Animação de entrada

• cubic-bezier (0.16, 1, 0.3, 1);

• duração: 0.3s

Animação de expansão

• cubic-bezier (0.87, 0, 0.13, 1);

• duração: 0.3s

Animação de saída

• cubic-bezier (0.16, 1, 0.3, 1);

• duração: 0.2s

Referência de animação

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
30/07/2025	31/07/2025	--/--/----	--/--/----	Ver na tabela

Atualizações por data

Julho/2025

• 31/07/2025

  • Criação do componente

  • Documentação do componente