cosmemilton-ui/serverAcoes & navegacao

CmButtonGroup

Use quando acoes relacionadas precisam compartilhar alinhamento, largura ou espacamento.

Import

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

Grupo de acoes

tsx
import { CmButton } from "cosmemilton-ui/client";
import { CmButtonGroup, CmStack } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmStack gap="md">
      <CmButtonGroup>
        <CmButton tone="primary">Aprovar</CmButton>
        <CmButton variant="outline">Revisar</CmButton>
        <CmButton variant="ghost">Arquivar</CmButton>
      </CmButtonGroup>
      <CmButtonGroup orientation="vertical" fullWidth>
        <CmButton variant="soft">Exportar CSV</CmButton>
        <CmButton variant="soft">Exportar PDF</CmButton>
      </CmButtonGroup>
    </CmStack>
  );
}

API rapida

CmButtonGroup

orientationfullWidthgapchildren