Button

Buttons are used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Properties

Name
Default
Description
size
medium
The size of the button. One of:
  • x-small
  • small
  • medium
  • large
color
accent
The color of the button. One of:
  • accent
  • gray
  • green
  • red
  • blue
  • orange
variant
fill
The variant of the button. One of:
  • fill
  • outline
  • outline-fill
  • invisible
block
false
Whether the button should be displayed as a block element.
align
center
The alignment of the content when using block. Can be start or center
as
button
The element to render the button as. Can be button or a.
button
A reference to the native <button> element (bindable).
All other properties will be forwarded to the underlying element.

Size

<Button size="x-small">X-Small Button</Button>
<Button size="small">Small Button</Button>
<Button size="medium">Medium Button</Button>
<Button size="large">Large Button</Button>

Variants and Colors

Fill

<Button color="accent" variant="fill">Fill Accent</Button>
<Button color="gray" variant="fill">Fill Gray</Button>
<Button color="green" variant="fill">Fill Green</Button>
<Button color="red" variant="fill">Fill Red</Button>
<Button color="blue" variant="fill">Fill Blue</Button>
<Button color="orange" variant="fill">Fill Orange</Button>
<Button color="input" variant="fill">Fill Button</Button>

Fill-Light

<Button color="accent" variant="fill-light">Fill Accent</Button>
<Button color="gray" variant="fill-light">Fill Gray</Button>
<Button color="green" variant="fil-light">Fill Green</Button>
<Button color="red" variant="fill-light">Fill Red</Button>
<Button color="blue" variant="fill-light">Fill Blue</Button>
<Button color="orange" variant="fill-light">Fill Orange</Button>

Outline

<Button color="accent" variant="outline">Outline Accent</Button>
<Button color="gray" variant="outline">Outline Gray</Button>
<Button color="green" variant="outline">Outline Green</Button>
<Button color="red" variant="outline">Outline Red</Button>
<Button color="blue" variant="outline">Outline Blue</Button>
<Button color="orange" variant="outline">Outline Orange</Button>

Outline Fill

<Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
<Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
<Button color="green" variant="outline-fill">Outline-fill Green</Button>
<Button color="red" variant="outline-fill">Outline-fill Red</Button>
<Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
<Button color="orange" variant="outline-fill">Outline-fill Orange</Button>

Invisible

<Button color="accent" variant="invisible">Invisible Accent</Button>
<Button color="gray" variant="invisible">Invisible Gray</Button>
<Button color="green" variant="invisible">Invisible Green</Button>
<Button color="red" variant="invisible">Invisible Red</Button>
<Button color="blue" variant="invisible">Invisible Blue</Button>
<Button color="orange" variant="invisible">Invisible Orange</Button>
<Button color="input" variant="invisible">Invisible Input</Button>

Slots

  • default - The content (label) of the button.

    <Button>Search</Button>
  • start - Placed before the content (e.g. icon). 
    <Button>
    <IconSearch slot="start" />
    Search
</Button>
  • end - Placed after the content (e.g. icon). 
    <Button>
    Search
    <IconSearch slot="end" />
</Button>
  • action - Placed after the content, locked to the right side of the button. This is useful with the block property. 
    <Button block color="gray">
    <IconSearch slot="start" />
    Search
    <IconCaretDown slot="action" />
</Button>

Examples

The as property can be used to render the button as a link.

<Button as="a" href="https://hyvor.com" target="_blank">
    HYVOR <IconBoxArrowUpRight slot="end" />
</Button>
HYVOR

Button with Loader

The Loader component can be used to indicate a loading state.

<Button>
    Submit
    <Loader slot="action" size="small" invert />
</Button>

Conditional Slots

<Button>
    <svelte:fragment slot="start">{#if loading}<Loader  />{/if}</svelte:fragment>
    Button
</Button>

Disabled Button

You can use the disabled attribute to disable a button.

<Button disabled>Disabled Button</Button>

Button Group

You can use the ButtonGroup component to group buttons together.

<ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
</ButtonGroup>