Smelte logo
SMELTE
Github Smelte

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 from "smelte/src/components/Button";
  import Icon from "smelte/src/components/Icon";
</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>