mirror of
https://github.com/HoshinoSuzumi/rayine-ui.git
synced 2025-04-10 01:28:50 +08:00
128 lines
1.2 KiB
Markdown
128 lines
1.2 KiB
Markdown
---
|
|
description: Create a button component with different variants and colors
|
|
---
|
|
|
|
## Usage
|
|
|
|
Default button style
|
|
|
|
::ComponentPreview
|
|
Button
|
|
::
|
|
|
|
### Styles
|
|
|
|
Use the `variant` and `color` props to predefined styles and change the color of buttons.
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
variant: soft
|
|
color: violet
|
|
---
|
|
Button
|
|
::
|
|
|
|
#### Match
|
|
|
|
The color of the buttons will match the color theme.
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
color: match
|
|
excludedProps:
|
|
- color
|
|
---
|
|
Button
|
|
::
|
|
|
|
#### Invert
|
|
|
|
The color of the buttons will be the opposite of the color theme.
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
color: invert
|
|
excludedProps:
|
|
- color
|
|
---
|
|
Button
|
|
::
|
|
|
|
### Sizes
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
size: sm
|
|
---
|
|
Button
|
|
::
|
|
|
|
### Block
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
block: true
|
|
---
|
|
Button
|
|
::
|
|
|
|
### Label
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
label: Button
|
|
---
|
|
::
|
|
|
|
### Disabled
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
disabled: true
|
|
variant: solid
|
|
---
|
|
Button
|
|
::
|
|
|
|
### Icon
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
icon: tabler:adjustments
|
|
size: sm
|
|
loading: false
|
|
---
|
|
Settings
|
|
::
|
|
|
|
### Loading
|
|
|
|
::ComponentPreview
|
|
---
|
|
props:
|
|
loading: true
|
|
variant: solid
|
|
---
|
|
Button
|
|
::
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
::ComponentProps
|
|
::
|
|
|
|
### Config
|
|
|
|
::ComponentDefaults
|
|
::
|