New to Kendo UI for Vue? Start a free 30-day trial

ButtonProps

Interface

Represents the props of the Kendo UI for Vue Button component. Extends the native button props.

Definition

Package:@progress/kendo-vue-buttons

Properties

Sets the accesskey attribute of the Button. Users press this key to focus the Button.

Sets the aria-label attribute of the Button.

Sets the aria-pressed attribute of the Button.

dir?

string

Sets the direction of the Button.

disabled?

boolean

Sets whether the Button is disabled (see example). Defaults to false.

endIcon?

string

Sets the name of an existing font icon in a Kendo UI for Vue theme. The Button renders it after the text.

Example:
vue
<KButton :end-icon="'chevron-right'">Next</KButton>

Sets an SVGIcon that the Button renders after the text.

Example:
vue
<KButton :end-svg-icon="chevronRightIcon">Next</KButton>

fillMode?

"solid" | "outline" | "flat" | "link"

Sets the fill style of the Button.

The available options are:

  • solid
  • outline
  • flat
  • link
Default:

undefined

icon?

string

Sets the name of an existing icon in a Kendo UI for Vue theme (see example). The Button renders the icon inside a span.k-icon element.

Sets a CSS class—or multiple classes separated by spaces—that the Button applies to a span element inside it (see example). Use it to show custom icons.

iconSize?

IconSize

Sets the size of the SVG icon inside the Button.

id?

string

Sets the id attribute of the Button.

imageAlt?

string

Sets the alternative text of the image inside the Button.

imageUrl?

string

Sets the URL of an img element inside the Button (see example). The URL can be relative or absolute. The browser resolves a relative URL against the URL of the web page.

role?

string

Sets the role attribute of the Button.

rounded?

"small" | "medium" | "large" | "none" | "full"

Sets the border radius of the Button.

The available options are:

  • none
  • small
  • medium
  • large
  • circle
  • full
Default:

undefined

selected?

boolean

Sets the selected state of the Button. Use it for controlled mode.

size?

"xs" | "small" | "medium" | "large"

Sets the size of the Button.

The available options are:

  • xs
  • small
  • medium
  • large
Default:

undefined

svgIcon?

SVGIcon

Sets an SVGIcon that the Button renders.

tabIndex?

number

Sets the tabindex attribute of the Button.

themeColor?

"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse"

Sets the theme color of the Button.

The available options are:

  • base
  • primary
  • secondary
  • tertiary
  • info
  • success
  • warning
  • error
  • inverse
Default:

undefined

title?

string

Sets the title HTML attribute of the Button.

togglable?

boolean

Sets whether the Button shows a selected state when the user clicks it (see example). Defaults to false.

Default:

false

type?

string

Sets the type attribute of the Button, for example button or submit.