Available values are prm, yellow, red, green, any HEX or RGBA/RGB value.

Types

You can change the variant of RButton by passing the boolean props of flat, fill, bordered or textStyle.

Loading

You can set a loading over the button using boolean loading prop

Icon

You can show an icon before or after button content with icon prop or named icon slot. In order to customize you own icon pack please refer to icons section.

iconAfter prop places the icon after the content of the button.

Only Icon

iconOnly prop makes button fit the icon by setting fixed width and height to it.

Compact

Tag

Which tag it should render instead of button. can be any html tag or a Vue component.

Routing

incomplete: You can use RButton as nuxt-link / router-link or a tag.

To Home Page

Anchor Tag

If you are using to prop on RButton in a nuxt application, the passed options.nuxtOptions.NuxtLink will be used, or you can pass it directly to RButton

<RButton :tag="NuxtLink" to="/some-route" />

If none of conditions above meet, router-link will be used.

Props

Name	Type	Required	Default	Description
to	string	No	''	The target route of the link. Only use either to or href.
href	string	No	''	The target URL of the link. Only use either to or href.
flat	boolean	No	false	If true, removes background.
bordered	boolean	No	false	If true, adds border styling.
fill	boolean	No	false	If true, sets background color to primary theme color (`prm`).
cancel	boolean	No	false	If true, gives disabled style without disabling the button.
color	string	No	''	The primary color of the button.
textColor	string	No	''	The text color of the button ( only when fill is true ).
textStyle	boolean	No	false	If true, sets the style of normal text to it.
round	boolean	No	false	If true, adds border radius to create a circular shape.
disabled	boolean	No	false	If true, disables the button and changes its appearance.
icon	string	No	''	The name of the icon to be displayed in the button.
iconOnly	boolean	No	false	If true, gives specific width and height..
iconAfter	boolean	No	false	If true, displays the icon after the button text.
colorInherit	boolean	No	false	If true, text color will be inheritted from parent.
tag	string \| component	No	undefined	The html tag or view components instead of button
compact	boolean	No	undefined	Reduces padding of the button.
loading	boolean	No	undefined	If true set a loading state on component.

Events

All events/attrs passed down will be passed to button/nuxt-link/router-link/a component.

Slots

Name	Description
default	Default slot for button
icon	Icon slot for button (overrides `icon` prop)

GuideCustomization

ComponentsInput