Button link
An anchor styled as a button, for navigation that should look like an action.
npx shadcn add @klarhimmel/buttonWhen to use
Use for
A call to action that goes to another page.
Not for
Actions that change data. Use Button.
Pairs with
Hero and call-to-action blocks.
Preview
button-link.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { ButtonLink } from '@/components/klarhimmel/ui/button';
export default function Example() {
return (
<Theme theme="brand">
<ButtonLink href="/pricing" variant="secondary">See pricing</ButtonLink>
</Theme>
);
}Install
Import
import { ButtonLink } from '@/components/klarhimmel/ui/button';- Lands in
- components/klarhimmel/ui/button.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
- Render in
- Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | Destination. Unsafe schemes become "#". |
variant | 'primary' | 'secondary' | 'ghost' | 'accent' | 'soft' | 'primary' | Same variants as Button. |
size | 'sm' | 'md' | 'lg' | 'md' | Same sizes as Button. |
icon / iconEnd | ReactNode | - | Icons before and after the label. |
full | boolean | false | Stretch to the container width. |