Button

Buttons include simple button styles for actions in different types and sizes.

default button   primary button   link button  

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

<script>
    import {Button} from 'svelte-spectre'
</script>

<Button>default button</Button>
<Button variant="primary">primary button</Button>
<Button variant="link">link button</Button>

Button variants

Add the btn-success or btn-error class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.

default button   link button   primary button   success button   error button  

variant defaultlinkprimarysecondarysuccesserror

<Button variant="success">default button</Button>
<Button variant="error">link button</Button>

Button sizes

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

XXL button   XL button   LG button   MD button   SM button   XS button  

size xssmmdlgxlxxl

<Button size="xxl">XXL button</Button>
<Button size="xl">XL button</Button>
<Button size="lg">LG button</Button>
<Button size="md">MD button</Button>
<Button size="sm">SM button</Button>
<Button size="xs">XS button</Button>

Button icon

Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

           

icon arrow-uparrow-rightarrow-downarrow-leftupwardforwarddownwardbackcaretmenuappsmore-horizmore-vertresize-horizresize-vertplusminuscrosscheckstopshutdownrefreshsearchflagbookmarkeditdeletesharedownloaduploadcopymailpeoplemessagephototimelocationlinkemojixrayhomecircle-checkwifiaudio

shape squarecircle

<IconButton icon="home" variant="primary" size="sm"/>
<IconButton icon="flag" variant="primary" shape="circle" size="lg"/>

Button       Button   Button    

<Button variant="primary" size="sm"><Icon icon="arrow-down" />&nbsp; Button</Button>
<Button variant="primary" size="xs">Button &nbsp;<Icon icon="arrow-down" /></Button>

Button states #

Add the active class for active button state style.

Default active   Primary active   Link active  

state nullactivedisabledloading

<Button active>default active</Button>

Add the disabled class or the disabled attribute for disabled button state style.

default disabled   primary disabled   link disabled  

<Button disabled>default disabled</Button>

A button with the loading class can show loading indicator.

default loading   primary loading   link loading  

<Button loading>default loading</Button>

Button groups

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

block

<ButtonGroup block>
    <Button>default button</Button>
    <Button variant="primary">primary button</Button>
    <Button variant="link">link button</Button>
</ButtonGroup>