Button Link
A component to render a link as a button. This component is a wrapper around the NuxtLink component.
Color
You can use any color from your Pinceau design system tokens configuration file as a value of color
prop. The convention used is a color palette named from 50
to 900
.
Ghost button
It is possible to make a button transparent by using the ghost
prop. Useful for secondary links.
Sizes
The button comes in 4 sizes: small
, medium
, large
and giant
.
Props
Props | Type | Default | Description |
---|---|---|---|
href | String | '' | The URL to link to. The prop is required |
blank | Boolean | false | Whether to open the link in a new tab |
icon | String | '' | The icon to display (only on left side currently). Any component name prefixed with Icon , icon name from Iconify or any emoji could be used. |
color | String | primary | The color of the button. The color should be a valid key from the Pinceau color tokens configuration. |
ghost | Boolean | false | Whether to make the button transparent. |
Slots
Slot | Description |
---|---|
default | The content of the button. |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
buttonLink: {
fontWeight: '{fontWeight.semibold}',
borderWidth: '0px',
borderStyle: 'solid',
borderColor: 'transparent',
borderRadius: '{radii.2xs}',
boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)',
width: 'fit-content',
icon: {
marginInlineEnd: '{space.2}',
},
small: {
padding: `{space.1} {space.3}`,
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
},
medium: {
padding: `{space.2} {space.4}`,
fontSize: '{text.base.fontSize}',
lineHeight: '{text.base.lineHeight}',
},
large: {
padding: `{space.2} {space.4}`,
fontSize: '{text.lg.fontSize}',
lineHeight: '{text.lg.lineHeight}',
},
giant: {
padding: `{space.3} {space.5}`,
fontSize: '{text.xl.fontSize}',
lineHeight: '{text.xl.lineHeight}',
},
},
}
})
ElementsBadgeBadge is a label that indicates version number, status or importance. It can be used to highlight a piece of information or draw attention to a particular item in a color-assisted manner.ElementsCalloutComponent used to grab user attention and communicate an important message, that does not require interaction from user.