TODO

Button

The button component is used to trigger an action or event when clicked. It can be used to submit a form, navigate to a different page, or to trigger a function. In order to differentiate between an anchor element or a button element, the href is used.

Preview

Extends base props from: HTMLButtonAttributes | HTMLAnchorAttributes

Name Type Default

variant The variant of the button

ButtonVariant

'default'

color The color of the button

ButtonColor

'primary'

href The URL to navigate to when the button is clicked. It will use an anchor as an element for the component

string

Type Value(s)

ButtonVariant 'condensed' | 'default' | 'expanded'

ButtonColor 'primary' | 'secondary' | 'muted' | 'destructive'

Usage

As a button

Simply import the component and use it in your app, without the href property.

  
        <script lang="ts">
  import { Button } from '@mikededo/aero-ui';
 
  const handleOnClick = () => {
    // ...
  };
</script>
 
<div class="flex items-center gap-2">
  <Button onclick={handleOnClick}>Confirm</Button>
  <Button color="secondary">Cancel</Button>
</div>

As an anchor

Simply import the component and use it in your app, with the href property. If used in SvelteKit, internal links are also supported.

  
        <script lang="ts">
  import { Button } from '@mikededo/aero-ui';
</script>
 
<Button href="/home">Go back</Button>

Bottom sheet

Checkbox