Components

ActionButton

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

ActionButton

ActionIconButton

CopyButton

Component

View code

Show playground

Props

Props	Default	Type
`actionType`	`ButtonActionType.ACTION`	`ButtonActionType`
`styleType`	`ButtonStyleType.NEUTRAL_OUTLINED`	`ButtonStyleType`
`type`	`'button'`	`'button' \| 'submit' \| 'reset'`
`text`	`'Button text'`	`string`
`size`	`ButtonSize.LG`	`ButtonSize`
`icon`	`'mdi:help'`	`string`
`iconPosition`	`IconPosition.NONE`	`IconPosition`
`iconClass`	—	`string`
`disabled`	`false`	`boolean`
`to`	`'/'`	`string`
`isExternal`	`false`	`boolean`
`isRounded`	`false`	`boolean`
`isFullWidth`	`false`	`boolean`
`isMobileFullWidth`	`false`	`boolean`
`isLoading`	`false`	`boolean`
`loadingText`	`'Processing...'`	`string`
`id`	—	`string`
`textClass`	—	`string`

Usage

actionType

The actionType prop defines whether the button performs an action or navigates to a route. It uses the ButtonActionType enum.

 <template>
    <ActionButton :actionType="ButtonActionType.ACTION" />
</template>

Type: ButtonActionType
Default: ButtonActionType.ACTION

Options

Value	Description
`ACTION`	Converts the HTML tag of the component into a '<button>' tag. Use @click to trigger callback functions.
`LINK`	Converts the HTML tag of the component into a '<a>' tag. Use 'to' prop to set a link

styleType

Controls the button's visual variant using ButtonStyleType enum.

 <template>
    <ActionButton :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED" />
</template>

Type: ButtonStyleType
Default: ButtonStyleType.NEUTRAL_OUTLINED

Options

Value	Description
`PRIMARY_BRAND_FILLED`	Primary brand filled
`PRIMARY_BRAND_TRANSPARENT`	Primary brand transparent
`PRIMARY_BRAND_SOFT`	Primary brand soft
`SECONDARY_BRAND_FILLED`	Secondary brand filled
`NEUTRAL_OUTLINED`	Neutral outlined
`NEUTRAL_TRANSPARENT`	Neutral transparent
`NEUTRAL_TRANSPARENT_SUBTLE`	Neutral transparent subtle
`NEUTRAL_FILLED`	Neutral filled
`DELETE_FILLED`	Delete filled
`DELETE_OUTLINED`	Delete outlined
`DELETE_SOFT`	Delete soft
`DELETE_TRANSPARENT`	Delete transparent

type

HTML button type when actionType is ACTION.

 <template>
    <ActionButton type="submit" />
</template>

Type: 'button' | 'submit' | 'reset'
Default: 'button'

Options

Value	Description
`button`	HTML button type
`submit`	HTML submit type
`reset`	HTML reset type

text

Button label content.

 <template>
    <ActionButton text="Click Me" />
</template>

Type: string
Default: 'Button text'

size

Controls sizing via ButtonSize enum.

 <template>
    <ActionButton :size="ButtonSize.XL" />
</template>

Type: ButtonSize
Default: ButtonSize.LG

Options

Value	Description
`XS`	xs
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl

icon

Sets the icon displayed on the button.

 <template>
    <ActionButton icon="mdi:check" />
</template>

Type: string
Default: 'mdi:help'

iconPosition

Where to display the icon in relation to the label. Uses the IconPosition enum.

 <template>
    <ActionButton 
        icon="mdi:check" 
        :iconPosition="IconPosition.RIGHT" 
    />
</template>

Type: IconPosition
Default: IconPosition.NONE

Options

Value	Description
`LEFT`	left
`RIGHT`	right
`NONE`	none (icon does not appear at all)

iconClass

Sets a custom class for the icon element.

 <template>
    <ActionButton 
        :iconPosition="IconPosition.LEFT"
        icon="mdi:check" 
        iconClass="text-red-500" 
    />
</template>

Type: string

disabled

Disables the button.

 
<template>
    <ActionButton disabled />
</template>

Type: boolean
Default: false

to

Route to navigate to when actionType is set to LINK.

 <template>
    <ActionButton 
        :actionType="ButtonActionType.LINK"
        to="/about"
    />
</template>

Type: string
Default: '/'

isExternal

Opens the link in a new tab when true.

 <template>
    <ActionButton 
        :actionType="ButtonActionType.LINK"
        to="https://example.com"
        :isExternal="true"
    />
</template>

Type: boolean
Default: false

isRounded

Makes the button fully rounded.

 <template>
    <ActionButton :isRounded="true" />
</template>

Type: boolean
Default: false

isFullWidth and isMobileFullWidth

Use these props to control the width behavior of the button:

**isFullWidth**: Makes the button span the full width of its container at all screen sizes.
**isMobileFullWidth**: Makes the button full width only on mobile, and revert to auto width on larger screens. The default breakpoint is md but you can overwrite it using class.

 <template>
    <ActionButton :isFullWidth="true" />
</template>

 <template>
    <ActionButton :isMobileFullWidth="true" />
</template>

Type: boolean
Default: false

isLoading

Displays a loading spinner and disables interaction.

 <template>
    <ActionButton :isLoading="true" />
</template>

Type: boolean
Default: false

loadingText

Text shown when button is in a loading state.

 <template>
    <ActionButton 
        :isLoading="true"
        loadingText="Please wait..."
    />
</template>

Type: string
Default: 'Processing...'

id

Provides an HTML ID to the button element.

 <template>
    <ActionButton id="my-action-button" />
</template>

Type: string

textClass

Sets a custom class for the button label.

 <template>
    <ActionButton textClass="font-bold" />
</template>

Type: string

Accessibility

ActionButton already exposes an accessible name from its visible text, so aria-label is not required in the common case.

Use a native aria-label only when the visible label is not descriptive enough for screen readers.

 <template>
    <ActionButton
        text="Go"
        aria-label="Go to dashboard"
    />
</template>

Emits

Value	Description
`@click`	Triggers a callback function while using actionType: `ACTION`. (Default value)

Example

 <template>
    <ActionButton 
        @click="handleClick"
    />
</template>
<script setup lang="ts">
const handleClick = () => {
    console.log("Button clicked")
}
</script>