Button
Extended from PrimeVue Button and NuxtLink
When using a button, please ensure that the copy style is Sentence case.
Default
This is the default size for buttons. For the secondary button, add the outline boolean prop.
Default on dark background
When the button will appear on a dark background, use the dark-bg variant.
Small
For a small button, pass in size="sm".
Small on dark background
Icons
Icons will adjust their size automatically to match the size of the button.
Disabled
Disabled on dark background
Inline link
The link button variant can also appear within a paragraph of text by adding the inline prop.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do incididunt ut labore et dolore magna aliqua.
Loading
This example shows how to use the spinner from Bootstrap Vue to display a loading indicator within a button.
Props
- Name
href
- Type
String
- Default
null
- Description
- An external URL to navigate to when using a button as a link.
- Name
inline
- Type
Boolean
- Default
false
- Description
- Use only for the 'link' variant. If true, removes the fixed padding and height from the button so it can be aligned with other text next to it.
- Name
outline
- Type
Boolean
- Default
false
- Description
- If true, changes to the outline version of the specified variant.
- Name
size
- Type
String
- Default
"md"
- Description
- The size of the button: 'md', or 'sm'.
- Name
to
- Type
String
- Default
null
- Description
- An internal path to navigate to when using a button as a link
- Name
variant
- Type
String
- Default
"primary"
- Description
- The name of the desired button variant: 'primary', 'dark-bg', or 'link'.