Button

import { XerButton } from "@xerius/codey-components";

Showcases

CTA Button

For indicating the primary path of the application.

Small CTA Button

Only to be used in combination with a textfield The small CTA button never be of another type of button, it should always be a CTA.

Small Variants Button

Small variants with a full and stroke look.

CTA Link Button

Buttons with the link prop provided will be a tag element.

Small Variants Link Button

Buttons with the link prop provided will be a tag element.

Disabling CTA Buttons

Disabling Small Variants Buttons

Props

Name	Type	Default	Required	Description
variant	String	"stroke"	false	Indicates what the variant of the button is. ("cta", "cta-outline", "full", "stroke")
variantColor	String		false	Indicates what the variant color of the button is. ("cta", "brand", "base")
icon	Icon Component		false	Provide an icon.
left	Boolean	false	false	Icon + text: icon will be placed on the left side of the button. Icon only: button will point to the left.
loading	Boolean	false	false	Shows loading icon with animation.
link	String		false	URL of the link, which it will navigate to after click. When link is relative, Vue Router will be used for navigation.
type	String	"button"	false	The button type (for buttons) or link type (for links). See Vue Router documentation for link types.
html	String		false	HTML to show in the button. To be used instead of the v-html directive.
disabled	Boolean	false	false	Indicates if the button is disabled or not.
dataAutomationId	String	"button"	false	Sets the data automation id for the button component.

Events

All standard HTML button events are supported (click, focus, blur, etc.) when rendered as a button. When rendered as a link, all standard HTML anchor events are supported.

Slots

Name	Purpose
default	Button content (text, HTML elements). Cannot be used with html prop.