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.
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 Button</Button>
<Button color="gray" variant="fill">Fill Button</Button>
<Button color="green" variant="fill">Fill Button</Button>
<Button color="red" variant="fill">Fill Button</Button>
<Button color="blue" variant="fill">Fill Button</Button>
<Button color="orange" variant="fill">Fill Button</Button>

Outline

<Button color="accent" variant="outline">Outline Button</Button>
<Button color="gray" variant="outline">Outline Button</Button>
<Button color="green" variant="outline">Outline Button</Button>
<Button color="red" variant="outline">Outline Button</Button>
<Button color="blue" variant="outline">Outline Button</Button>
<Button color="orange" variant="outline">Outline Button</Button>

Outline Fill

<Button color="accent" variant="outline-fill">Outline-fill Button</Button>
<Button color="gray" variant="outline-fill">Outline-fill Button</Button>
<Button color="green" variant="outline-fill">Outline-fill Button</Button>
<Button color="red" variant="outline-fill">Outline-fill Button</Button>
<Button color="blue" variant="outline-fill">Outline-fill Button</Button>
<Button color="orange" variant="outline-fill">Outline-fill Button</Button>

Invisible

<Button color="accent" variant="invisible">Invisible Button</Button>
<Button color="gray" variant="invisible">Invisible Button</Button>
<Button color="green" variant="invisible">Invisible Button</Button>
<Button color="red" variant="invisible">Invisible Button</Button>
<Button color="blue" variant="invisible">Invisible Button</Button>
<Button color="orange" variant="invisible">Invisible Button</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>

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>
Table of Contents