CmButton

import { CmButton } from "cosmemilton-ui/client";

import { CmButton } from "cosmemilton-ui/client";
import { CmRow } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmRow gap="sm" align="center" wrap>
      <CmButton tone="primary">Salvar</CmButton>
      <CmButton variant="outline">Cancelar</CmButton>
      <CmButton variant="ghost">Detalhes</CmButton>
      <CmButton tone="danger">Excluir</CmButton>
      <CmButton tone="primary" loading>
        Enviando
      </CmButton>
      <CmButton disabled>Indisponivel</CmButton>
    </CmRow>
  );
}

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

export default function Example() {
  return (
    <CmStack gap="md">
      <CmRow gap="sm" align="center" wrap>
        <CmButton size="xs">XS</CmButton>
        <CmButton size="sm">SM</CmButton>
        <CmButton size="md">MD</CmButton>
        <CmButton size="lg">LG</CmButton>
        <CmButton size="xl">XL</CmButton>
      </CmRow>
      <CmRow gap="sm" align="center" wrap>
        <CmButton shape="pill" tone="primary">Pill</CmButton>
        <CmButton shape="square" iconOnly aria-label="Adicionar" icon="+" />
        <CmButton fullWidth variant="soft">Acao em largura total</CmButton>
      </CmRow>
    </CmStack>
  );
}