Button

A clickable entity for all your controlling and linking needs.

Comes in three flavours: filled, outline and flat.

Showcase
Source 
<Button filled>button</Button>
<Button outline>button</Button>
<Button>button</Button>

<Button disabled filled>button</Button>
<Button disabled outline>button</Button>
<Button disabled>button</Button>

<Button danger filled>button</Button>
<Button danger outline>button</Button>
<Button danger noRipple>button</Button>

<Button filled>
  <CheckIcon size="20" class="mr" />
  icons
</Button>
<Button selected>selected</Button>
<Button round neutral><XIcon size="20" /></Button>

Properties #

Style Properties

Name
Default
Type
Description
filled false boolean Adds a filled background to the button.
Mutually exclusive with outline and selected.
outline false boolean Adds a border to the button.
Mutually exclusive with filled.
danger false boolean Gives the button a color of danger (red by default)
Mutually exclusive with neutral.
neutral false boolean Gives the button a neutral color (very dark gray by default).
Mutually exclusive with danger.
round false boolean Adjusts the padding to be equal on all sides. Great for icon-only buttons.
rectangle false boolean Halves the border radius and increases the padding. Well-suited for large menus.
small false boolean Cuts the padding to make the button smaller.
selected false boolean Gives the button a tinted background. Suitable for indicating the selected item.
Mutually exclusive with filled.
noRipple false boolean Disables the ripple effect.

Functional Properties

Name
Default
Type
Description
disabled false boolean Disables the button, styling it appropriately and disabling click events.
href null string Turns the button into a link (prefetch-enabled for Sapper).
noPrefetch false boolean Disables Sapper prefetching for link buttons (those with an href prop).
events [] Array List of handlers for the Events action: [{ name, handler }].
... any Everything else will be passed to the underlying <button> or <a> element.

Class Properties

All <Button> components use the .btn class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.

Events #

Native DOM events of buttons and links may be handled using the Events action through the events property.

Name
Event Detail
Description
click { nativeEvent } Fired on clicking the button with a mouse or keyboard.

Slots #

Default slot

The content of the Button. Icons, other components, everything is fair game here.

SCSS Variables #

Name
Description
Default
$main The main theme color. Used in backgrounds of filled buttons, text and tint of flat buttons, etc.
#4300B0
$font The font of the button text. 'Ubuntu'
$button-radius The curvature radius of a button. 1.5625em
$dark The color used in neutral buttons.
#333333
$danger The color used in danger buttons.
#B80000
$shadow-1 The shadow of filled buttons.
hover me
0 2px 5px rgba(0, 0, 0, .14), 0 1px 5px rgba(0, 0, 0, .12);
$main-text The text color of filled buttons.
#FFFFFF
$shadow-raised The shadow of filled buttons on hover.
hover me
0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
$disabled The text color of disabled buttons.
#888888
$disabled-bg The background color of filled disabled buttons.
#D7D7D7
$button-font-weight The font weight of the buttons. 500