Button

Visualization & Interaction

Click for Action

Icon Support
3 Color Themes
Form Ready

Quickstart #

<script>
	import { Button } from '@steeze-ui/components'
</script>

<Button
	theme="primary"
	on:click={()=>console.log("clicked!")}
>Click Me</Button>

API Reference #

Property	Type	Default
`disabled`	`Boolean`	`false`
`icon`	`IconSource`	`null`
`iconTheme`	`String`	`"default"`
`undefined`	`String`	`"20px"`
`theme`	`String`	`"secondary"`

Styling #

Name	Default
`--st-button-height`	`--st-field-height`
`--st-button-padding`	`--st-field-padding`
`--st-button-font-size`	`--st-field-font-size`
`--st-button-font-weight`	`--st-field-font-weight`
`--st-button-color`	`--st-body-text-color`
`--st-button-bg-color`	`transparent`
`--st-button-border-radius`	`--st-field-border-radius`
`--st-button-border-color`	`transparent`
`--st-button-border-width`	`--st-field-border-field`
`--st-button-transition`	`--st-hover-transition`

Examples #

Use with icon

You can use any Icon from any Icon Pack

<script>
  import { Moon } from '@steeze-ui/heroicons'
  import { Button } from '@steeze-ui/components'
</script>

<Button icon={Moon} iconTheme="solid" />