cosmemilton-ui/serverLayout & chrome

CmPageHeader

Use no topo de telas de modulo para explicar contexto e concentrar acoes primarias.

Import

tsx
import { CmPageHeader } from "cosmemilton-ui/server";

Cabecalho com acoes

Clientes
128 ativos

Carteira ativa

Acompanhe status comercial, financeiro e pendencias cadastrais.

tsx
import { CmButton } from "cosmemilton-ui/client";
import { CmBadge, CmPageHeader } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmPageHeader
      eyebrow="Clientes"
      title="Carteira ativa"
      description="Acompanhe status comercial, financeiro e pendencias cadastrais."
      meta={<CmBadge tone="success">128 ativos</CmBadge>}
      actions={<CmButton tone="primary">Novo cliente</CmButton>}
    />
  );
}

API rapida

CmPageHeader

eyebrowtitledescriptionmetaactionsalign