Button Link
Installation
Run the following command
npx vibes@latest add button-linkUsage
import { ButtonLink } from '@/vibes/soul/primitives/button-link';function Usage() { return ( <ButtonLink shape={'pill'} size={'large'} variant={'primary'} href="#"> Show now </ButtonLink> );}API Reference
ButtonLinkProps
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
className | string | |
variant | 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'primary' |
size | 'large' | 'medium' | 'small' | 'x-small' | 'large' |
shape | 'pill' | 'rounded' | 'square' | 'circle' | 'pill' |
Refer to the Next.js Link component documentation for more details.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --button-focus: var(--primary); --button-font-family: var(--font-family-body); --button-primary-background: var(--primary); --button-primary-background-hover: var(--primary-highlight); --button-primary-text: var(--foreground); --button-primary-border: var(--primary); --button-secondary-background: var(--foreground); --button-secondary-background-hover: var(--background); --button-secondary-text: var(--background); --button-secondary-border: var(--foreground); --button-tertiary-background: var(--background); --button-tertiary-background-hover: var(--contrast-100); --button-tertiary-text: var(--foreground); --button-tertiary-border: var(--contrast-200); --button-ghost-background: transparent; --button-ghost-background-hover: color-mix(in oklab, var(--foreground) 5%, transparent); --button-ghost-text: var(--foreground); --button-ghost-border: transparent;}