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.

Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz

Ghost button

It is possible to make a button transparent by using the ghost prop. Useful for secondary links.

Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz

Sizes

The button comes in 4 sizes: small, medium, large and giant.

Play on StackBlitz Play on StackBlitz Play on StackBlitz Play on StackBlitz

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}',
         },
      },
   }
})

Edit this page on GitHub

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.