Components

ButtonField

Form field component with an embedded action button, useful for triggering context-specific actions.

Component

View code

Show playground

Sample label

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`label`	—	—	`string`
`ariaLabel`	—	—	`string`
`actionType`	—	`ButtonActionType.ACTION`	`ButtonActionType`
`styleType`	—	`ButtonStyleType.NEUTRAL_OUTLINED`	`ButtonStyleType`
`text`	—	`'Button text'`	`string`
`size`	—	`ButtonSize.LG`	`ButtonSize`
`icon`	—	`'mdi:help'`	`string`
`iconPosition`	—	`IconPosition.NONE`	`IconPosition`
`to`	—	`'/'`	`string`
`isExternal`	—	`false`	`boolean`
`isRounded`	—	`false`	`boolean`
`isFullWidth`	—	`false`	`boolean`
`isMobileFullWidth`	—	`false`	`boolean`
`disabled`	—	`false`	`boolean`
`isLoading`	—	`false`	`boolean`
`loadingText`	—	`'Processing...'`	`string`

Usage

id

Sets the id of the field.

 <template>
    <ButtonField id="field-id" />
</template>

Type: string
Required: true

label

Sets the label of the field.

 <template>
    <ButtonField label="Sample label" />
</template>

Type: string

ariaLabel

Sets the accessible name for the internal button when the visual label is hidden.

 <template>
    <ButtonField ariaLabel="Submit action" />
</template>

Type: string

actionType

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

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

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

text

Button label content.

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

Type: string
Default: 'Button text'

size

Controls sizing via ButtonSize enum.

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

Options

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

icon

Sets the icon displayed within the button.

 <template>
    <ButtonField 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>
    <ButtonField 
        icon="mdi:check" 
        :iconPosition="IconPosition.RIGHT" 
    />
</template>

Options

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

to

Route to navigate to when actionType is set to LINK.

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

Type: string
Default: '/'

isExternal

Opens the link in a new tab when true.

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

Type: boolean
Default: false

isRounded

Makes the button fully rounded.

 <template>
    <ButtonField :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>
    <ButtonField :isFullWidth="true" />
</template>

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

Type: boolean
Default: false

disabled

Disables the button.

 
<template>
    <ButtonField disabled />
</template>

Type: boolean
Default: false

isLoading

Displays a loading spinner and disables interaction.

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

Type: boolean
Default: false

loadingText

Text shown when button is in a loading state.

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

Emits

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

Example

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