Button
Buttons allow the user to take actions or make choices.
Usage
import { Button } from 'stwui';
import Button from 'stwui/button';
link <script lang="ts">
import { Button } from 'stwui';
</script>
<Button on:click={() => console.log("I've been clicked!")}>No Type</Button>
<Button type="primary">primary</Button>
<Button type="danger">danger</Button>
<Button type="ghost">ghost</Button>
<Button type="link" href="https://google.com">link</Button>
With Loading
<script lang="ts">
import { Button } from 'stwui';
let loading = false;
function toggleLoading() {
loading = !loading;
}
</script>
<Button {loading} on:click={toggleLoading}>No Type</Button>
<Button type="primary" {loading} on:click={toggleLoading}>primary</Button>
<Button type="danger" {loading} on:click={toggleLoading}>danger</Button>
<Button type="ghost" {loading} on:click={toggleLoading}>ghost</Button>
<Button type="link" {loading} on:click={toggleLoading}>link</Button>
With Disabled
<script lang="ts">
import { Button } from 'stwui';
</script>
<Button disabled>No Type</Button>
<Button type="primary" disabled>primary</Button>
<Button type="danger" disabled>danger</Button>
<Button type="ghost" disabled>ghost</Button>
<Button type="link" disabled>link</Button>
With Leading & Trailing
<script lang="ts">
import { Button } from 'stwui';
const home = "svg-path";
</script>
<Button>
<Button.Leading data={home} slot="leading" />
No Type
</Button>
<Button type="primary">
<Button.Leading data={home} slot="leading" />
primary
</Button>
<Button type="danger">
<Button.Leading data={home} slot="leading" />
danger
</Button>
<Button type="ghost">
<Button.Leading data={home} slot="leading" />
ghost
</Button>
<Button type="link">
<Button.Leading data={home} slot="leading" />
link
</Button>
<Button>
No Type
<Button.Trailing data={home} slot="trailing" />
</Button>
<Button type="primary">
primary
<Button.Trailing data={home} slot="trailing" />
</Button>
<Button type="danger">
danger
<Button.Trailing data={home} slot="trailing" />
</Button>
<Button type="ghost">
ghost
<Button.Trailing data={home} slot="trailing" />
</Button>
<Button type="link">
link
<Button.Trailing data={home} slot="trailing" />
</Button>
<script lang="ts">
import { Button } from 'stwui';
const home = "svg-path";
</script>
<Button shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button shape="circle" type="primary">
<Button.Icon data={home} slot="icon" />
</Button>
<Button shape="circle" type="danger">
<Button.Icon data={home} slot="icon" />
</Button>
<Button shape="circle" type="ghost">
<Button.Icon data={home} slot="icon" />
</Button>
<Button shape="circle" type="link">
<Button.Icon data={home} slot="icon" />
</Button>
<Button shape="pill">No Type</Button>
<Button shape="pill" type="primary">primary</Button>
<Button shape="pill" type="danger">danger</Button>
<Button shape="pill" type="ghost">ghost</Button>
<Button shape="pill" type="link">link</Button>
<Button shape="rounded">No Type</Button>
<Button shape="rounded" type="primary">primary</Button>
<Button shape="rounded" type="danger">danger</Button>
<Button shape="rounded" type="ghost">ghost</Button>
<Button shape="rounded" type="link">link</Button>
<Button shape="square">No Type</Button>
<Button shape="square" type="primary">primary</Button>
<Button shape="square" type="danger">danger</Button>
<Button shape="square" type="ghost">ghost</Button>
<Button shape="square" type="link">link</Button>
<script lang="ts">
import { Button, Swap } from 'stwui';
let loading = false;
function toggleLoading() {
loading = !loading;
}
</script>
<Button shape="circle" on:click={toggleLoading}>
<Swap slot="icon" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button shape="circle" type="primary" on:click={toggleLoading}>
<Swap slot="icon" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button shape="circle" type="danger" on:click={toggleLoading}>
<Swap slot="icon" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button shape="circle" type="ghost" on:click={toggleLoading}>
<Swap slot="icon" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button shape="circle" type="link" on:click={toggleLoading}>
<Swap slot="icon" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button on:click={toggleLoading}>
<Swap slot="leading" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
No Type
</Button>
<Button type="primary" on:click={toggleLoading}>
<Swap slot="leading" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
primary
</Button>
<Button type="danger" on:click={toggleLoading}>
<Swap slot="leading" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
danger
</Button>
<Button type="ghost" on:click={toggleLoading}>
<Swap slot="leading" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
ghost
</Button>
<Button type="link" on:click={toggleLoading}>
<Swap slot="leading" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
link
</Button>
<Button on:click={toggleLoading}>
No Type
<Swap slot="trailing" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button type="primary" on:click={toggleLoading}>
primary
<Swap slot="trailing" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button type="danger" on:click={toggleLoading}>
danger
<Swap slot="trailing" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button type="ghost" on:click={toggleLoading}>
ghost
<Swap slot="trailing" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<Button type="link" on:click={toggleLoading}>
link
<Swap slot="trailing" {loading}>
<Button.Icon data={menu} slot="on" stroke="currentColor" />
<Button.Icon data={close} slot="off" stroke="currentColor" />
</Swap>
</Button>
<script lang="ts">
import { Button } from 'stwui';
const home = "svg-path";
</script>
<Button type="primary" size="xs">xs</Button>
<Button type="primary" size="sm">sm</Button>
<Button type="primary" size="md">md</Button>
<Button type="primary" size="lg">lg</Button>
<Button type="primary" size="xl">xl</Button>
<Button type="primary" size="xs" shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button type="primary" size="sm" shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button type="primary" size="md" shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button type="primary" size="lg" shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button type="primary" size="xl" shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button type="primary" size="fab" shape="circle">
<Button.Icon data={home} slot="icon" />
</Button>
<Button type="default" size="xs">
<Button.Leading data={home} slot="leading" />
xs
</Button>
<Button type="default" size="sm">
<Button.Leading data={home} slot="leading" />
sm
</Button>
<Button type="default" size="md">
<Button.Leading data={home} slot="leading" />
md
</Button>
<Button type="default" size="lg">
<Button.Leading data={home} slot="leading" />
lg
</Button>
<Button type="default" size="xl">
<Button.Leading data={home} slot="leading" />
xl
</Button>
Button Props
| disabled | boolean | false |
| htmlType | 'button' | 'submit' | 'reset' | button |
| loading | boolean | false |
| defaultLoading | boolean | true |
| type | 'default'| 'primary' | 'danger' | 'ghost' | 'link' | 'text' | 'dark' | undefined | |
| shape | 'square' | 'circle' | 'rounded' | 'pill' | rounded |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fab' | md |
| disableHover | boolean | false |
| ariaLabel | string | undefined | |
| href | string | undefined | |
Button Slots
| leading | <Button.Leading slot="leading" /> |
| icon | <Button.Icon slot="icon" /> |
| default | |
| trailing | <Button.Trailing slot="trailing" /> |
Button.Leading Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Button.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Button.Trailing Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Button Class Identifiers
| stwui-button |
| stwui-button-leading-wrapper |
| stwui-button-icon-wrapper |
| stwui-button-trailing-wrapper |
| stwui-button-hover |
| stwui-button-loader |
