Button Group

#

Applied when the link is active. More info here.

String

-

When set, always appends the relative path to the current path. More info here.

Boolean

-

Sets up button background opacity.

Number

1

Color CSS style border (theme supported options or HEX).

String

""

Color of the component (theme string or HEX string).

String

"primary"

Applies disabled style and removes all user interaction effects.

Boolean

false

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

Applied when the link is active with exact match. More info here.

String

-

Provide a set of sizes for fonts as a global component specific setting.

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}

Adds a background gradient.

Boolean

false

Take all container width

Boolean

false

Behavior of the button, when it's being hovered. Can be mask (superimposes color mask on the background or text color for plain state) or opacity (adds opacity to the background or text color for plain state).

String

"mask"

Mask color for mask behavior.

String

"textInverted"

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.15

Designates the component as anchor and applies the href attribute. More info here.

String

-

Sets an icon.

String

""

Sets an icon color.

String

""

The icon to be displayed to the right of a title.

String

""

Indicates that something is loading (spinner icon).

Boolean

false

Applies plain styling.

Boolean

false

Named preset combination of component props.

String

-

Behavior of the button, when it's being pressed. Can be mask (superimposes color mask on the background or text color for plain state) or opacity (adds opacity to the background or text color for plain state).

String

"mask"

Mask color for mask behavior.

String

"textPrimary"

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.13

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

Adds rounded corners (or make a button fully rounded if only icon is passed).

Boolean

false

Specify size for component. "small", "medium", "large" sizes are available. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

String

"medium"

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"button"

Navigation target, More info here.

String

-

Text color (theme string or HEX string).

String

""

Sets button text opacity.

Number

1

The target route of the link. More info here.

String | Object

-

Will be used as value for html type attribute.

String

"button"

default

Slot for buttons