Button
Interactive button component with multiple variants and states
The Button component provides a flexible and accessible button implementation for your Blazor applications.
Basic Usage
<Button>Click me</Button>Variants
ShellUI buttons come in several variants to fit different design needs:
Default
<Button>Default Button</Button>Secondary
<Button Variant="secondary">Secondary Button</Button>Destructive
<Button Variant="destructive">Delete Item</Button>Outline
<Button Variant="outline">Outline Button</Button>Ghost
<Button Variant="ghost">Ghost Button</Button>Link
<Button Variant="link">Link Button</Button>Sizes
Choose from different button sizes:
Small
<Button Size="sm">Small Button</Button>Default
<Button>Default Size</Button>Large
<Button Size="lg">Large Button</Button>States
Loading State
<Button IsLoading="true">Loading...</Button>Disabled State
<Button Disabled="true">Disabled Button</Button>With Icons
Buttons can include icons for better visual hierarchy:
<Button>
<span class="mr-2">+</span>
Add Item
</Button>Event Handling
<Button OnClick="HandleClick">Click me</Button>
@code {
private void HandleClick(MouseEventArgs args)
{
// Handle button click
}
}API Reference
Properties
| Property | Type | Default | Description |
|---|---|---|---|
Variant | string | default | Visual style variant |
Size | string | md | Button size |
IsLoading | bool | false | Shows loading spinner |
Disabled | bool | false | Disables the button |
Type | string | button | HTML button type |
ChildContent | RenderFragment | null | Button content |
Variant Options
defaultsecondarydestructiveoutlineghostlink
Size Options
smmdlgicon
Events
OnClick-EventCallback<MouseEventArgs>for click events
Accessibility
The Button component includes:
- Proper ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- Focus management
Customization
Buttons can be customized using CSS variables or by modifying the component source:
/* Custom button colors */
:root {
--button-primary: #your-color;
--button-primary-hover: #your-hover-color;
}Installation
shellui add button