Button

Features:

• Color
• Size
• Custom tag

Usage

<script setup>
import { Button } from 'gurunkit';
</script>

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

Color

Set button color using color props. Supported values: primary, light, error, warning, success.

<script setup>
import { Button } from 'gurunkit';
</script>

<template>
  <Button color="primary">Primary</Button>
  <Button color="warning">Warning</Button>
  <Button color="error">Error</Button>
  <Button color="light">Light</Button>
  <Button color="success">Success</Button>
</template>

Size

Set button size using size props. Supported values: sm, md, lg.

<script setup>
import { Button } from 'gurunkit';
</script>

<template>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</template>

Custom Tag

Set button tag using tag props. Accepts HTML tag name or Vue component.

<script setup>
import { Button } from 'gurunkit';
</script>

<template>
  <Button tag="a" href="https://google.com" color="light">Google</Button>
</template>

Google

Custom Class

Add custom class using class attribute.

<script setup>
import { Button } from 'gurunkit';
</script>

<template>
  <Button class="w-full">Button fullwidth</Button>
</template>

HTML Attributes and Events

HTML attributes and events are automatically inherited.

<script setup>
import { Button } from 'gurunkit';

const onClick = () => alert('test');
</script>

<template>
  <Button type="button" title="Show Alert" @click="onClick">Test</Button>
</template>

API

Props

Name	Type	Required	Default	Description
color	primary, light, success, warning, error	❌	primary	Button color
size	sm, md, lg	❌	md	Button size
tag	string or Vue component	❌	null	Custom tag
All HTML attributes	-	❌	-	HTML attributes

Events

Name	Type	Description
All HTML events	-	HTML events