Buttons
Example :: Default
<script>
import { Button } from '@colorfuldots/svelteit'
let title = 'Default'
</script>
<Button>{title}</Button>
Example :: Disabled
<script>
import { Button } from '@colorfuldots/svelteit'
let title1 = 'Disabled'
let title2 = 'Active'
</script>
<Button success disabled>{title1}</Button>
<Button success>{title2}</Button>
Example :: Solid Colors
<script>
import { Button } from '@colorfuldots/svelteit'
</script>
<Button>Default</Button>
<Button primary>Primary</Button>
<Button secondary>Secondary</Button>
<Button success>Success</Button>
<Button danger>Danger</Button>
<Button warning>Warning</Button>
<Button info>Info</Button>
<Button light>Light</Button>
<Button dark>Dark</Button>
Example :: Outlined Colors
<script>
import { Button } from '@colorfuldots/svelteit'
</script>
<Button>Default</Button>
<Button primary outlined>Primary</Button>
<Button secondary outlined>Secondary</Button>
<Button success outlined>Success</Button>
<Button danger outlined>Danger</Button>
<Button warning outlined>Warning</Button>
<Button info outlined>Info</Button>
<Button light outlined>Light</Button>
<Button dark outlined>Dark</Button>
Example :: Sizes
<script>
import { Button } from '@colorfuldots/svelteit'
</script>
<Button primary outlined small>Small</Button>
<Button secondary outlined medium>Medium</Button>
<Button success outlined>Default</Button>
<Button danger outlined large>Large</Button>
<Button warning small>Small</Button>
<Button info medium>Medium</Button>
<Button light>Default</Button>
<Button dark large rounded>Large</Button>
Example :: Rounded
<script>
import { Button } from '@colorfuldots/svelteit'
</script>
<Button primary rounded>Primary</Button>
<Button secondary rounded>Secondary</Button>
<Button success rounded>Success</Button>
<Button danger rounded>Danger</Button>
<Button warning outlined rounded>Warning</Button>
<Button info outlined rounded>Info</Button>
<Button light outlined rounded>Light</Button>
<Button dark outlined rounded>Dark</Button>
Example :: Block Level
<script>
import { Button } from '@colorfuldots/svelteit'
</script>
<Button primary block>Primary</Button>
<Button secondary block>Secondary</Button>
<Button success block>Success</Button>
<Button danger block>Danger</Button>
<Button warning outlined block>Warning</Button>
<Button info outlined block>Info</Button>
<Button light outlined block>Light</Button>
<Button dark outlined block>Dark</Button>
Example :: Button Group
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button>one</Button>
<Button>two</Button>
<Button>three</Button>
</ButtonGroup>
Example :: Button Group Solid Colors
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button dark>one</Button>
<Button dark>two</Button>
<Button dark>three</Button>
</ButtonGroup>
Example :: Button Group Outlined
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button primary outlined>one</Button>
<Button primary outlined>two</Button>
<Button primary outlined>three</Button>
</ButtonGroup>
Example :: Button Group Sizes
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button dark small>small</Button>
<Button dark small>two</Button>
<Button dark small>three</Button>
</ButtonGroup>
<ButtonGroup>
<Button dark medium>medium</Button>
<Button dark medium>two</Button>
<Button dark medium>three</Button>
</ButtonGroup>
<ButtonGroup>
<Button dark>default</Button>
<Button dark>two</Button>
<Button dark>three</Button>
</ButtonGroup>
<ButtonGroup>
<Button dark large>large</Button>
<Button dark large>two</Button>
<Button dark large>three</Button>
</ButtonGroup>
Example :: Button Group Icons
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button dark>
<i class="fa fa-bars" />
</Button>
<Button dark>
<i class="fa fa-trash" />
</Button>
<Button dark>
<i class="fa fa-close" />
</Button>
</ButtonGroup>
Example :: Button Group Icons + Label
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button primary>
<i class="fa fa-home" />
Home
</Button>
<Button primary>
<i class="fa fa-trash" />
Delete
</Button>
<Button primary>
<i class="fa fa-close" />
Close
</Button>
</ButtonGroup>
Example :: Button Group Icons + Label + Disabled
<script>
import { ButtonGroup, Button } from '@colorfuldots/svelteit'
</script>
<ButtonGroup>
<Button primary>
<i class="fa fa-home" />
Home
</Button>
<Button primary disabled>
<i class="fa fa-trash" />
Delete
</Button>
<Button primary>
<i class="fa fa-close" />
Close
</Button>
</ButtonGroup>
API
| Prop Name | Type | Is Required | Default Value | Description |
|---|---|---|---|---|
| on:click | func | false | null | Handler function of your choice |
| title | string | true | null | Sets the button title |
| disabled | bool | false | false | Disables the button |
| primary, secondary, success, danger, warning, info, light, dark | bool | false | false | Sets button color |
| outlined | bool | false | false | Sets an outline to the button |
| small, medium, large | bool | false | false | Sets the size of the button |
| rounded | bool | false | false | Adds rounded corners to the button |
| block | bool | false | false | Adds block-level / full-width to button |
Buttons
A typical button is a rectangle or rounded rectangle, wider than it is tall, with a descriptive caption in its center. The most common method of pressing a button is clicking it with a pointer controlled by a mouse, but other input such as keystrokes can be used to execute the command of a button. A button is not however always restricted to a rectangular shape. The sole requirement of button interaction is that the user can execute a command by a click action. Thus pictures and background areas can be programmed as buttons. When pressed, in addition to performing a predetermined task, buttons often undergo a graphical change to mimic a mechanical button being depressed. Depending on the circumstance, buttons may be designated to be pushed only once and execute a command, while others may be used to receive instant feed back and may require the user to click more than once to receive the desired result. Other buttons are designed to toggle behavior on and off like a check box. These buttons will show a graphical clue (such as staying depressed after the mouse is released) to indicate the state of the option.