Components

Button

A button element that can act as a link or trigger an action.

Usage

Use the default slot to set the label of the Button.

<template>
  <MeButton>Button</MeButton>
</template>

Label

You can achieve the same result using the label prop.

<template>
  <MeButton label="Button" />
</template>

Color

Use the color prop to change the color of the Button.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton color="primary">Primary</MeButton>
    <MeButton color="secondary">Secondary</MeButton>
    <MeButton color="success">Success</MeButton>
    <MeButton color="warning">Warning</MeButton>
    <MeButton color="error">Error</MeButton>
    <MeButton color="info">Info</MeButton>
    <MeButton color="neutral">Neutral</MeButton>
  </div>
</template>

Variant

Use the variant prop to change the variant of the Button.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton variant="solid">Solid</MeButton>
    <MeButton variant="outline">Outline</MeButton>
    <MeButton variant="soft">Soft</MeButton>
    <MeButton variant="subtle">Subtle</MeButton>
    <MeButton variant="ghost">Ghost</MeButton>
    <MeButton variant="link">Link</MeButton>
  </div>
</template>

Size

Use the size prop to change the size of the Button.

<template>
  <div class="flex flex-wrap items-center gap-2">
    <MeButton size="xs">Extra Small</MeButton>
    <MeButton size="sm">Small</MeButton>
    <MeButton size="md">Medium</MeButton>
    <MeButton size="lg">Large</MeButton>
    <MeButton size="xl">Extra Large</MeButton>
  </div>
</template>

Icon

Use the icon prop to show an Icon inside the Button.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton icon="i-lucide-rocket" size="md" color="primary" variant="solid">
      Button
    </MeButton>
  </div>
</template>

Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton leading-icon="i-lucide-user" size="md">
      With leading icon
    </MeButton>
    <MeButton trailing-icon="i-lucide-arrow-right" size="md">
      With trailing icon
    </MeButton>
  </div>
</template>

The label as prop or slot is optional so you can use the Button as an icon-only button.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton icon="i-lucide-search" size="md" color="primary" variant="solid" />
    <MeButton icon="i-lucide-settings" size="md" color="neutral" variant="outline" />
    <MeButton icon="i-lucide-plus" size="md" color="success" variant="soft" />
  </div>
</template>

Block

Use the block prop to make the Button full width.

<template>
  <MeButton block>Full width button</MeButton>
</template>

Square

Use the square prop to render the button with equal padding on all sides.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton square icon="i-lucide-plus" />
    <MeButton square icon="i-lucide-settings" color="neutral" variant="outline" />
  </div>
</template>

Loading

Use the loading prop to show a loading icon and disable the Button.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton loading>Loading...</MeButton>
    <MeButton loading :trailing="false">Loading...</MeButton>
  </div>
</template>

Loading Auto

Use the loading-auto prop to show the loading icon automatically while the @click promise is pending.

<script setup lang="ts">
async function onClick() {
  return new Promise<void>(res => setTimeout(res, 1000))
}
</script>

<template>
  <MeButton loading-auto @click="onClick">
    Click me
  </MeButton>
</template>

Disabled

Use the disabled prop to disable the Button.

<template>
  <div class="flex flex-wrap gap-2">
    <MeButton disabled>Disabled</MeButton>
    <MeButton disabled variant="outline">Disabled Outline</MeButton>
  </div>
</template>

Link

You can pass properties like to, target, etc. to render the Button as a link.

Visit website

<template>
  <MeButton to="https://mercadoeletronico.com.br" target="_blank">
    Visit website
  </MeButton>
</template>

API

Props

Prop	Type	Default	Description
`label`	`string`	-	Text content for the button
`color`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'`	`'primary'`	Button color
`variant`	`'solid' \| 'outline' \| 'soft' \| 'subtle' \| 'ghost' \| 'link'`	`'solid'`	Button variant style
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the button
`icon`	`string`	-	Icon to display
`leadingIcon`	`string`	-	Icon to display on the left side
`trailingIcon`	`string`	-	Icon to display on the right side
`leading`	`boolean`	`true`	When true, the icon will be displayed on the left side
`trailing`	`boolean`	`false`	When true, the icon will be displayed on the right side
`block`	`boolean`	`false`	Makes the button full width
`square`	`boolean`	`false`	Render the button with equal padding on all sides
`loading`	`boolean`	`false`	Shows a loading spinner and disables the button
`loadingAuto`	`boolean`	`false`	Show loading state automatically while @click promise is pending
`loadingIcon`	`string`	`'i-lucide-loader-circle'`	The icon when loading is true
`disabled`	`boolean`	`false`	Disables the button
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Type of button element
`to`	`string \| RouteLocation`	-	Renders the button as a link
`target`	`'_blank' \| '_self' \| '_parent' \| '_top'`	-	Target attribute for anchor buttons
`active`	`boolean`	`false`	Force the button to be active
`activeColor`	`string`	-	Color when the button is active
`activeVariant`	`string`	-	Variant when the button is active
`ui`	`object`	-	Override component slots styles

Slots

Slot	Description
`default`	Content for the button
`leading`	Content to display on the left side
`trailing`	Content to display on the right side

Events

Event	Arguments	Description
`click`	`MouseEvent`	Emitted when the button is clicked

Accessibility

The Button component follows WAI-ARIA guidelines:

Uses native <button> element when not a link
Uses <a> element when to or href is provided
Properly handles disabled state
Supports keyboard navigation

Examples

Button Group

<template>
  <div class="flex">
    <MeButton color="neutral" variant="outline" class="rounded-r-none">
      Left
    </MeButton>
    <MeButton color="neutral" variant="outline" class="rounded-none border-x-0">
      Center
    </MeButton>
    <MeButton color="neutral" variant="outline" class="rounded-l-none">
      Right
    </MeButton>
  </div>
</template>

Form Submit

<template>
  <form @submit.prevent="onSubmit">
    <MeButton type="submit" loading-auto>
      Submit Form
    </MeButton>
  </form>
</template>

Contribution

A comprehensive guide on contributing to EletroDS, including project structure, development workflow, and best practices.

MCP Server

Connect your AI tools to EletroDS documentation with a native MCP server.