Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Basic

Light

Dark

Block

prop	description	type	Default value
value	Bound boolean value	Boolean	false
color	Color variant, accepts any of the main colors described in Tailwind config	String	primary
outlined	Outlined variant	Boolean	false
text	Text button variant (transparent background)	Boolean	false
block	Full block width button	Boolean	false
disabled	Disabled state	Boolean	false
icon	Icon button variant	String	null
small	Smaller size	Boolean	false
light	Lighter variant	Boolean	false
dark	Darker variant	Boolean	false
flat	Flat variant	Boolean	false
iconClass	List of classes to pass down to icon	String	empty string
href	Link URL	String	null
add	List of classes to add to the component	String	empty string
remove	List of classes to remove from the component	String	empty string
replace	List of classes to replace in the component	Object	{}

Outlined

As anchor

Text

Disabled

FAB (Floating action button)

Fab flat

<script>
  import {
    Button,
    Icon
  } from "smelte";
</script>

<h6 class="mb-3 mt-6">Basic</h6>
<div class="py-2">
  <Button>Button</Button>
</div>

<h6 class="mb-3 mt-6">Light</h6>
<div class="py-2">
  <Button light>Button</Button>
</div>

<h6 class="mb-3 mt-6">Dark</h6>
<div class="py-2">
  <Button dark>Button</Button>
</div>

<h6 class="mb-3 mt-6">Block</h6>
<div class="py-2">
  <Button color="alert" dark block>Button</Button>
</div>

<h6 class="mb-3 mt-6">Outlined</h6>
<div class="py-2">
  <Button color="secondary" light block outlined>Button</Button>
</div>

<h6 class="mb-3 mt-6">Text</h6>
<div class="py-2">
  <Button text>Button</Button>
</div>

<h6 class="mb-3 mt-6">Disabled</h6>
<div class="py-2">
  <Button block disabled>Button</Button>
</div>

<h6 class="mb-3 mt-6">FAB <a href="https://material.io/components/buttons-floating-action-button/">(Floating action button)</a></h6>
<div class="py-2">
  <Button color="alert" icon="change_history" />
</div>

<h6 class="mb-3 mt-6">Fab flat</h6>
<div class="py-2">
  <Button color="error" icon="change_history" text light flat />
</div>