Skip to Content
ComponentsAtomsDrawer

Drawer

Atom / mobile overlay primitive

Drawer é um painel deslizante mobile-first. Use quando o gesto e a posição inferior fazem parte da experiência.

Drawer serve para ações secundárias, menus contextuais mobile, navegação temporária e bottom sheets simples. Para fluxos com paridade desktop/mobile, prefira Responsive Sheet.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoDrawerProps = {
  open: boolean
  title: string
  description?: string
  children: React.ReactNode
  onOpenChange: (open: boolean) => void
}
 
export function PulsoDrawer({ open, title, description, children, onOpenChange }: PulsoDrawerProps) {
  const titleId = React.useId()
  const descriptionId = description ? `${titleId}-description` : undefined
 
  if (!open) return null
 
  return (
    <div className="fixed inset-0 z-50 flex items-end bg-black/35 p-2" role="presentation">
      <button aria-label="Fechar painel" className="absolute inset-0" onClick={() => onOpenChange(false)} />
      <section role="dialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descriptionId} className="relative w-full rounded-t-[var(--radius-xl)] border border-[var(--border)] bg-[var(--popover)] p-4 shadow-[var(--shadow-lg)]">
        <div aria-hidden="true" className="mx-auto mb-3 h-1 w-10 rounded-full bg-[var(--border-strong)]" />
        <h2 id={titleId} className="text-lg font-semibold text-[var(--fg)]">{title}</h2>
        {description ? <p id={descriptionId} className="mt-1 text-sm text-[var(--fg-muted)]">{description}</p> : null}
        <div className="mt-4 text-sm text-[var(--fg)]">{children}</div>
      </section>
    </div>
  )
}
<PulsoDrawer open={open} onOpenChange={setOpen} title="Ações da menção" description="Escolha uma ação segura para este item.">
  <button>Arquivar menção</button>
</PulsoDrawer>

Quando usar

  • Ações secundárias em mobile.
  • Bottom sheet simples com opções contextuais.
  • Navegação temporária em telas pequenas.
  • Painel inferior com gesto de arrastar.

Quando não usar

  • Para decisões críticas sem confirmação.
  • Para desktop quando Sheet comunica melhor o contexto.
  • Para conteúdo longo sem estrutura de scroll clara.
  • Para ação destrutiva isolada na thumb zone.

Regras

  1. Drawer é mobile-first.
  2. Toda ação por gesto precisa de alternativa visível.
  3. Ações destrutivas exigem confirmação explícita.
  4. Não esconda contexto crítico abaixo da dobra inicial.
  5. Para filtros e drill-down responsivos, use Responsive Sheet.
Last updated on
Context MenuEmpty