Components

ActionIconButton

An icon 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'`
`size`	`ButtonSize.LG`	`ButtonSize`
`icon`	`'mdi:help'`	`string`
`iconClass`	—	`string`
`disabled`	`false`	`boolean`
`to`	`'/'`	`string`
`isExternal`	`false`	`boolean`
`isDecorative`	`false`	`boolean`
`isRounded`	`false`	`boolean`
`id`	—	`string`
`ariaLabel`	—	`string`

Usage

actionType

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

 <template>
    <ActionIconButton :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>
    <ActionIconButton :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED" />
</template>

Type: ButtonStyleType
Default: ButtonStyleType.PRIMARY_BRAND_FILLED

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>
    <ActionIconButton type="submit" />
</template>

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

Options

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

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>
    <ActionIconButton icon="mdi:check" />
</template>

Type: string
Default: 'mdi:help'

iconClass

Sets a custom class for the icon element.

 <template>
    <ActionIconButton 
        icon="mdi:check" 
        iconClass="text-red-500" 
    />
</template>

Type: string

disabled

Disables the button.

 
<template>
    <ActionIconButton :disabled="true" />
</template>

to

Route to navigate to when actionType is set to LINK. Uses the ButtonActionType enum.

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

Type: string
Default: '/'

isExternal

Opens the link in a new tab when true.

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

Type: boolean
Default: false

isDecorative

Renders the icon button as a non-interactive span, keeping the same look. Use it when the button sits inside another interactive element such as a button, where a nested button is invalid HTML. The element ignores clicks and is not focusable.

 <template>
    <button type="button">
        Toggle
        <ActionIconButton
            isDecorative
            icon="mdi:unfold-more-horizontal"
            aria-hidden="true"
        />
    </button>
</template>

Type: boolean
Default: false

isRounded

Makes the button fully rounded.

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

Type: boolean
Default: false

id

Provides an HTML ID to the button element.

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

Type: string

ariaLabel

Sets the aria-label attribute for screen readers. Required for accessibility since the button contains only an icon with no visible text.

 <template>
    <ActionIconButton 
        icon="mdi:close" 
        ariaLabel="Close dialog" 
    />
</template>

Type: string

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>