cosmemilton-ui/serverLayout & chrome

CmToolbar / CmFilterBar

Use para acoes de pagina, filtros e comandos agrupados. CmFilterBar aplica o preset visual de filtros.

Import

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

Acoes e filtros

tsx
"use client";

import { CmButton, CmInput, CmSelect } from "cosmemilton-ui/client";
import { CmFilterBar, CmToolbar } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <>
      <CmToolbar justify="between" align="center">
        <CmButton tone="primary">Novo pedido</CmButton>
        <CmButton variant="outline">Exportar</CmButton>
      </CmToolbar>
      <CmFilterBar withinCard>
        <CmInput label="Buscar" placeholder="Cliente ou pedido" />
        <CmSelect
          label="Status"
          value=""
          onChange={() => undefined}
          placeholder="Todos"
          options={[{ value: "paid", label: "Pago" }, { value: "pending", label: "Pendente" }]}
        />
      </CmFilterBar>
    </>
  );
}

API rapida

CmToolbar

asdensitygapalignjustifywrapinsetcompact

CmFilterBar

withinCardchildren