Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bobthered/svelte-button
https://github.com/bobthered/svelte-button
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bobthered/svelte-button
- Owner: bobthered
- Created: 2021-02-10T12:15:01.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-14T18:57:33.000Z (almost 4 years ago)
- Last Synced: 2023-11-17T01:10:12.182Z (about 1 year ago)
- Language: Svelte
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @bobthered/svelte-button
Svelte component for creating buttons with tailwindcss
## Installation
```
npm i -D @bobthered/svelte-button
```
## Basic Usage
```
import Button from '@bobthered/svelte-button'
Click Here
```
## Available Props
| Prop | Default | Description |
| -------------- | ----------------------------------- | ---------------------------------------------------------------- |
| bg | `bg-primary-500 hover:bg-white` | Set bg class(s) |
| class | `""` | Add additional class(s) |
| cursor | `cursor-pointer` | Set cursor class(s) |
| display | `inline-flex` | Set display class(s) |
| duration | `duration-200 ` | Set duration class(s) |
| fontSize | `text-sm` | Set font size class(s) |
| fontWeight | `font-medium` | Set font weight class(s) |
| items | `items-center` | Set items class(s) |
| justifyContent | `justify-center` | Set justify content class(s) |
| href | `""` | If "type" prop is set to "link" use this to set the link address |
| outline | `focus:outline-none` | Set outline class(s) |
| padding | `py-4 px-10` | Set padding class(s) |
| ref | `""` | Set component reference |
| rounded | `rounded` | Set rounded class(s) |
| textColor | `text-white hover:text-primary-500` | Set text color class(s) |
| textTransform | `uppercase` | Set text transform class(s) |
| transition | `transition` | Set transition class(s) |
| type | `link` | Set this to either "link" or "submit" to change node type |