TODO

Icon button

The icon 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.

The component also supports being a melt element, meaning that it can also be used with any kind of builders. An example would be how is used with the Menu component.

Preview

Extends base props from: HTMLButtonAttributes | HTMLAnchorAttributes

Name Type Default

Icon The icon to display. LucideIcon is an alias for the Lucide Icon type

ComponentType<LucideIcon>

color The color of the icon button

IconButtonColor

'primary'

size The size of the icon button

IconButtonSize

'default'

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

string

strokeWidth Forwarded "strokeWidth" prop of the Lucide icon

IconProps['strokeWidth']

meltElement Optional melt builder element to forward to the root element as an action

AnyMeltElement

emptyMeltElement

Type Value(s)

IconButtonSize 'small' | 'default' | 'large'

IconButtonColor '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 { SaveIcon } from 'lucide-svelte';
  import { IconButton } from '@mikededo/aero-ui';
 
  const handleOnClick = () => {
    // ...
  };
</script>
 
<IconButton Icon={SaveIcon} onclick={handleOnClick} />

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 { ExternalLinkIcon } from 'lucide-svelte';
  import { IconButton } from '@mikededo/aero-ui';
</script>
 
<IconButton Icon={ExternalLinkIcon} href="https://github.com" />

Checkbox

Input