Components

Button

Let users take action, make choices, and move forward.

Import

import { Button } from "@dr-max/ui/button"

The entry carries its own precompiled CSS (including the styles of the Icon, Spinner and Text parts it composes) — no extra style imports needed.

Usage

<script setup lang="ts">
import { Button } from "@dr-max/ui/button"
</script>

<template>
  <Button variant="primary-green">Add to cart</Button>
</template>

Variants

<template>
  <Button variant="primary-green">Primary green</Button>
  <Button variant="primary-blue">Primary blue</Button>
  <Button variant="basic">Basic</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="primary-red">Red</Button>
  <Button variant="naked">Naked</Button>
  <Button variant="nakedNoPadding">Naked without padding</Button>
</template>

Sizes

<template>
  <Button size="xs" variant="secondary">Extra small</Button>
  <Button size="sm" variant="secondary">Small</Button>
  <Button size="md" variant="secondary">Medium</Button>
  <Button size="lg" variant="secondary">Large</Button>
  <Button size="xl" variant="secondary">Extra large</Button>
</template>

Icon

The icon prop takes an IconDefinition object imported from @dr-max/ui/icons (not a string), so it can't be set from markdown — use the playground below to try it live:

<script setup lang="ts">
import { Button } from "@dr-max/ui/button"
import { iconBasketShopping } from "@dr-max/ui/icons"
</script>

<template>
  <Button
    variant="primary-green"
    :icon="iconBasketShopping"
    icon-position="left"
  >
    Add to cart
  </Button>
</template>

Loading and disabled

<template>
  <Button variant="primary-green" loading>Processing</Button>
  <Button variant="primary-green" disabled>Unavailable</Button>
</template>

Playground

slot

variant

size

icon

iconPosition

disabled

<script setup lang="ts">
import { Button } from '@dr-max/ui/button'
</script>

<template>
  <Button variant="primary-green" size="md">Add to cart</Button>
</template>