cosmemilton-ui/clientFeedback & overlays

CmPopover

Use para filtros curtos, detalhes acionaveis e pequenos formularios contextuais.

Import

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

Filtro rapido

tsx
"use client";

import { CmButton, CmInput, CmPopover } from "cosmemilton-ui/client";
import { CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmPopover
      align="start"
      trigger={({ ref, toggle }) => (
        <CmButton ref={ref} variant="outline" onClick={toggle}>
          Filtrar
        </CmButton>
      )}
    >
      {({ close }) => (
        <CmStack gap="sm">
          <CmText weight="semibold">Filtro rapido</CmText>
          <CmInput label="Cliente" placeholder="Nome ou documento" />
          <CmButton size="sm" tone="primary" onClick={close}>Aplicar</CmButton>
        </CmStack>
      )}
    </CmPopover>
  );
}

API rapida

CmPopover

triggerchildrenopen/onOpenChangealign