Button
Displays a button or a component that looks like a button. Supports multiple variants, sizes, and states.
Preview
A preview of the Button component with interactive controls.
Installation
Add the Button component to your project.
ng g @ng-cn/core:c buttonUsage
Import and use the Button component in your Angular application.
<div class="flex flex-wrap items-center gap-4">
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>Examples
Explore different variations and use cases for the Button component.
All Variants
Buttons come in six distinct visual variants.
All Sizes
Available in four sizes to fit different contexts.
With Icon
Combine buttons with icons for enhanced visual communication.
Loading State
Show loading state with a spinner and disabled interaction.
Disabled State
Disabled buttons indicate unavailable actions.
As Link (asChild Pattern)
Use button styling on links with the asChild pattern.
Button Group
Group related buttons together.
Custom Styling with buttonVariants
Use buttonVariants to apply button styles to custom elements.
API Reference
Props | Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | The visual style of the button. |
size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | The size of the button. |
disabled | boolean | false | Whether the button is disabled. |
asChild | boolean | false | Render as child element, passing props to the child. |
class | string | — | Additional CSS classes to apply. |
type | 'button' | 'submit' | 'reset' | 'button' | The button type attribute. |