Components / Button
Button
Interactive button with 3 variants (primary, secondary, tertiary), 3 sizes, 5 rounded options, loading spinner with ripple effect, press-scale feedback, and danger type.
actions v0.1.0
Playground
Examples
Variants
<cg-stack direction="row" gap="sm"><cg-button variant="primary">Primary</cg-button><cg-button variant="secondary">Secondary</cg-button><cg-button variant="tertiary">Tertiary</cg-button></cg-stack>Sizes
<cg-stack direction="row" gap="sm" align="center"><cg-button size="sm">Small</cg-button><cg-button size="md">Medium</cg-button><cg-button size="lg">Large</cg-button></cg-stack>Rounded
<cg-stack direction="row" gap="sm" align="center"><cg-button rounded="none">None</cg-button><cg-button rounded="sm">Small</cg-button><cg-button rounded="md">Medium</cg-button><cg-button rounded="lg">Large</cg-button><cg-button rounded="full">Full</cg-button></cg-stack>Loading
<cg-stack direction="row" gap="sm"><cg-button loading>Saving...</cg-button><cg-button variant="secondary" loading>Loading</cg-button></cg-stack>Danger
<cg-stack direction="row" gap="sm"><cg-button type="danger">Delete</cg-button><cg-button type="danger" variant="primary">Confirm Delete</cg-button></cg-stack>Disabled
<cg-button disabled>Disabled</cg-button>Import
import { CgButton } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-button';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | "primary" | Visual style |
size | "sm" | "md" | "lg" | "md" | Button size |
type | "normal" | "danger" | "normal" | Semantic type — danger shows red styling |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius override |
disabled | boolean | false | Disable interaction |
loading | boolean | false | Show loading spinner, disables click |
full | boolean | false | Full-width button |
label | string | "" | Accessible label and fallback text content |