173 lines
4.8 KiB
Markdown
173 lines
4.8 KiB
Markdown
# SbButton
|
|
|
|
Primary action element with multiple variants, sizes, and states. Can render as a button or anchor element.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Variant | SbButtonVariant | Solid | Button style variant (Solid, Outline, Ghost, Link) |
|
|
| Size | SbSize | Md | Button size (Xs, Sm, Md, Lg, Xl) |
|
|
| Color | SbColor | Primary | Color intent (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted) |
|
|
| Disabled | bool | false | Whether the button is disabled |
|
|
| Loading | bool | false | Whether the button shows a loading spinner |
|
|
| FullWidth | bool | false | Whether the button takes full container width |
|
|
| Type | string | "button" | HTML button type (button, submit, reset) |
|
|
| Href | string? | null | If set, renders as anchor element instead of button |
|
|
| Target | string? | null | Target for anchor links (_blank, _self, etc.) |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes (e.g. aria-*, data-*) |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| OnClick | EventCallback<MouseEventArgs> | Fired when the button is clicked |
|
|
|
|
## Templates / Slots (RenderFragments)
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| ChildContent | RenderFragment | The button's text or content |
|
|
| StartIcon | RenderFragment | Icon rendered before the content |
|
|
| EndIcon | RenderFragment | Icon rendered after the content |
|
|
|
|
### Template Usage Examples
|
|
|
|
#### Basic Content
|
|
|
|
```razor
|
|
<SbButton>Click Me</SbButton>
|
|
```
|
|
|
|
#### With Start Icon
|
|
|
|
```razor
|
|
<SbButton>
|
|
<StartIcon><SbIcon Name="plus" Size="SbSize.Sm" /></StartIcon>
|
|
<ChildContent>Add Item</ChildContent>
|
|
</SbButton>
|
|
```
|
|
|
|
#### With End Icon
|
|
|
|
```razor
|
|
<SbButton Variant="SbButtonVariant.Outline">
|
|
<ChildContent>Download</ChildContent>
|
|
<EndIcon><SbIcon Name="download" Size="SbSize.Sm" /></EndIcon>
|
|
</SbButton>
|
|
```
|
|
|
|
#### With Both Icons
|
|
|
|
```razor
|
|
<SbButton>
|
|
<StartIcon><SbIcon Name="save" Size="SbSize.Sm" /></StartIcon>
|
|
<ChildContent>Save Changes</ChildContent>
|
|
<EndIcon><SbIcon Name="check" Size="SbSize.Sm" /></EndIcon>
|
|
</SbButton>
|
|
```
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-button` - Base class
|
|
- `sb-button--solid` - Solid variant
|
|
- `sb-button--outline` - Outline variant
|
|
- `sb-button--ghost` - Ghost variant
|
|
- `sb-button--link` - Link variant
|
|
- `sb-button--xs` - Extra small size
|
|
- `sb-button--sm` - Small size
|
|
- `sb-button--md` - Medium size
|
|
- `sb-button--lg` - Large size
|
|
- `sb-button--xl` - Extra large size
|
|
- `sb-button--primary` - Primary color
|
|
- `sb-button--secondary` - Secondary color
|
|
- `sb-button--success` - Success color
|
|
- `sb-button--warning` - Warning color
|
|
- `sb-button--danger` - Danger color
|
|
- `sb-button--info` - Info color
|
|
- `sb-button--muted` - Muted color
|
|
- `sb-button--disabled` - Disabled state
|
|
- `sb-button--loading` - Loading state
|
|
- `sb-button--full-width` - Full width
|
|
|
|
## Accessibility
|
|
|
|
- Uses native `<button>` or `<a>` elements
|
|
- Keyboard navigation: Tab to focus, Enter/Space to activate
|
|
- `aria-disabled` set when disabled (for anchor variant)
|
|
- `aria-busy` set when loading
|
|
- `rel="noopener noreferrer"` automatically added for external links
|
|
|
|
## Examples
|
|
|
|
### Variants
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Row" Gap="3">
|
|
<SbButton Variant="SbButtonVariant.Solid">Solid</SbButton>
|
|
<SbButton Variant="SbButtonVariant.Outline">Outline</SbButton>
|
|
<SbButton Variant="SbButtonVariant.Ghost">Ghost</SbButton>
|
|
<SbButton Variant="SbButtonVariant.Link">Link</SbButton>
|
|
</SbStack>
|
|
```
|
|
|
|
### Colors
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Row" Gap="3">
|
|
<SbButton Color="SbColor.Primary">Primary</SbButton>
|
|
<SbButton Color="SbColor.Secondary">Secondary</SbButton>
|
|
<SbButton Color="SbColor.Success">Success</SbButton>
|
|
<SbButton Color="SbColor.Warning">Warning</SbButton>
|
|
<SbButton Color="SbColor.Danger">Danger</SbButton>
|
|
</SbStack>
|
|
```
|
|
|
|
### Sizes
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Row" Gap="3" Align="SbAlign.Center">
|
|
<SbButton Size="SbSize.Sm">Small</SbButton>
|
|
<SbButton Size="SbSize.Md">Medium</SbButton>
|
|
<SbButton Size="SbSize.Lg">Large</SbButton>
|
|
</SbStack>
|
|
```
|
|
|
|
### States
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Row" Gap="3">
|
|
<SbButton>Normal</SbButton>
|
|
<SbButton Disabled="true">Disabled</SbButton>
|
|
<SbButton Loading="true">Loading</SbButton>
|
|
</SbStack>
|
|
```
|
|
|
|
### As Link
|
|
|
|
```razor
|
|
<SbButton Href="https://github.com" Target="_blank">
|
|
Go to GitHub
|
|
</SbButton>
|
|
```
|
|
|
|
### Form Submit
|
|
|
|
```razor
|
|
<SbButton Type="submit" Color="SbColor.Success">
|
|
Submit Form
|
|
</SbButton>
|
|
```
|
|
|
|
### Click Handler (OnClick)
|
|
|
|
```razor
|
|
<SbButton OnClick="HandleClick">Click me</SbButton>
|
|
|
|
@code {
|
|
private void HandleClick(MouseEventArgs e) { ... }
|
|
}
|
|
```
|