# `Button`

> The Button component is clickable element, providing a consistent and versatile way to add interactive elements to your user interfaces. Buttons are widely used to trigger actions, submit forms, or navigate between pages.


## Usage

```
<script>
  import Button from '@glance-design/button/Button.svelte';
</script>

<Button
  shape="rounded-full | rounded | none"
  size="x-small | small | medium | large"
  variant="primary | secondary | tertiary | clear | error | warning"
  outline={false}
  disabled={false}
  skeleton={false}
  rtl={false}
  animation={false}
  on:click={(event: MouseEvent) => {}}
  on:focus={(event: MouseEvent) => {}}
  on:mouseenter={(event: MouseEvent) => {}}
  on:mouseleave={(event: MouseEvent) => {}}
>
  Label
</Button>
```