cosmemilton-ui/clientFeedback & overlays

CmDrawer

Use quando o usuario precisa consultar ou editar algo mantendo a pagina de origem como contexto.

Import

tsx
import { CmDrawer } from "cosmemilton-ui/client";

Detalhe lateral

tsx
"use client";

import { useState } from "react";
import { CmButton, CmDrawer } from "cosmemilton-ui/client";
import { CmBadge, CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <CmButton variant="outline" onClick={() => setOpen(true)}>
        Ver detalhes
      </CmButton>
      <CmDrawer open={open} onClose={() => setOpen(false)} title="Pedido #1048">
        <CmStack gap="sm">
          <CmBadge tone="success">Pago</CmBadge>
          <CmText weight="semibold">Acme Ltda.</CmText>
          <CmText tone="muted">Entrega prevista para 4 de junho de 2026.</CmText>
        </CmStack>
      </CmDrawer>
    </>
  );
}

API rapida

CmDrawer

openonClosesidetitlechildren