mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
@@ -29,23 +29,6 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
### Link
|
||||
|
||||
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- label
|
||||
- target
|
||||
props:
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
slots:
|
||||
default: Button
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the color of the Button.
|
||||
@@ -160,6 +143,96 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
### Link
|
||||
|
||||
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- target
|
||||
props:
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
slots:
|
||||
default: Button
|
||||
---
|
||||
::
|
||||
|
||||
When the Button is a link or when using the `active` prop, you can use the `active-color` and `active-variant` props to customize the active state.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- color
|
||||
- variant
|
||||
items:
|
||||
activeColor:
|
||||
- primary
|
||||
- secondary
|
||||
- success
|
||||
- info
|
||||
- warning
|
||||
- error
|
||||
- neutral
|
||||
activeVariant:
|
||||
- solid
|
||||
- outline
|
||||
- soft
|
||||
- subtle
|
||||
- ghost
|
||||
- link
|
||||
props:
|
||||
active: true
|
||||
color: neutral
|
||||
variant: outline
|
||||
activeColor: primary
|
||||
activeVariant: solid
|
||||
slots:
|
||||
default: |
|
||||
|
||||
Button
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
You can also use the `active-class` and `inactive-class` props to customize the active state.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
active: true
|
||||
activeClass: 'font-bold'
|
||||
inactiveClass: 'font-light'
|
||||
slots:
|
||||
default: Button
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
::tip
|
||||
You can configure these styles globally in your `app.config.ts` file under the `ui.button.variants.active` key.
|
||||
|
||||
```ts
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
button: {
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
base: 'font-bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon and disable the Button.
|
||||
|
||||
Reference in New Issue
Block a user