https://github.com/021-projects/vue-button
Button component for Vue 3
https://github.com/021-projects/vue-button
Last synced: 5 months ago
JSON representation
Button component for Vue 3
- Host: GitHub
- URL: https://github.com/021-projects/vue-button
- Owner: 021-projects
- Created: 2022-05-13T16:33:38.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-05T16:27:32.000Z (over 3 years ago)
- Last Synced: 2025-09-15T12:42:27.894Z (10 months ago)
- Language: Vue
- Size: 485 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Button for Vue 3
## Project setup
```
yarn add @021-projects/vue-button
```
### Usage
```vue
import VueButton from '@021-projects/vue-button'
import '@021-projects/vue-button/dist/style.css'
...
components: { VueButton }
...
```
```vue
Click me
Loading
```
### Properties
```typescript
/**
* Text alignment for label
*/
align: {
type: String as PropType<'left' | 'center' | 'right'>,
default: 'center'
},
/**
* Button title
*/
label: {
type: String,
default: ''
},
/**
* Button size. Allowed xs, sm, md, lg, xl
*/
size: {
type: String as PropType,
default: 'md'
},
/**
* Button (background) color
*/
color: {
type: String,
default: '#27ae60'
},
/**
* Button text color
*/
textColor: {
type: String,
default: '#fff'
},
/**
* Rounded borders for button
*/
rounded: {
type: Boolean,
default: false
},
/**
* Ripple effect on click
*/
ripple: {
type: Boolean,
default: false
},
/**
* No shadow
*/
flat: {
type: Boolean,
default: false
},
/**
* No upppercase text transform
*/
noCaps: {
type: Boolean,
default: false
},
/**
* Disabled state
* If true, button will ignore click event
* And will look like disabled
*/
disabled: {
type: Boolean,
default: false
}
/**
* Loading state
* If true, button will ignore click event
* And will show loading spinner instead of label
*
* Spinner can be replaced in "loading" slot
*/
loading: {
type: Boolean,
default: false
},
/**
* Duration of loading spinner animation
* Works only if spinner was not replaced in "loading" slot
*/
loadingAnimationDuration: {
type: Number,
default: 2500
}
```