Button
Buttons allow users to take actions, and make choices, with a single tap.
setup
Import the Button component in a script tag.
Svelte Copy
import { Button } from "@mgisolutions/design-system/svelte";
basic usage
Basic usage Button
Demonstrate
Svelte Copy
<Button>Button</Button>
type
Choose type of button
Demonstrate
Svelte Copy
<Button type="primary">Button</Button>
size
Choose size of button
Demonstrate
Svelte Copy
<Button size="md">Button</Button>
pills
Set pills mode for button
Demonstrate
Svelte Copy
<Button size="md">Button</Button>
only icon
Set only icon
Demonstrate
Svelte Copy
<Button type="ghost" onlyIcon={true}>
<Icons iconValue={eyeIcon} width="20" height="20" fills={["#3858DB", "#3858DB"]} />
</Button>
disabled
Demonstrate
Svelte Copy
<Button disabled>Button</Button>
loading
Use loading enable and loading disable
Demonstrate
Svelte Copy
<Button pills={true} disabled={false} onlyIcon={false} loading={true}>Loading</Button>
Component Data
- props
- events
- slots
| Name | Description | Type | Default |
|---|---|---|---|
| type | Select type of button | 'primary' | 'secondary' | 'ghost' | 'destructive' | 'text' | primary |
| size | Set size for button | 'sm' | 'md' | 'lg' | md |
| pills | Button settings are round(border-radius=64px) | boolean | false |
| onlyIcon | Button only contains an icon | boolean | false |
| disabled | Set button disable | boolean' | false |
| loading | Set state loading for button | boolean' | false |
| prepend | button has an icon in front | boolean | false |
| append | button has an icon behind it | boolean | false |
| typeFor | Select type for form of button | 'button' | 'submit' | 'reset' | null | undefined | null |
| classButton | Set class for button | string | empty |
| ariaLabel | Set arial-label for button | string | empty |
| tag | Set tag for button, example a tag, select tag,.. | string | button |
| href | If type of tag is 'a', you should pass props href to direct url | string | empty |
| autoLoading | Auto switch state loading when click button | boolean | false |