Documentation
Navigation
ButtonLink
Gives navigation the visual emphasis of a button while retaining anchor semantics.
01
See it in context
Preview
02
Copy a working example
Usage
---
import { ButtonLink, Icon } from '@santi020k/lumen-astro'
---
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
<ButtonLink href="https://example.com" showArrow newTab>
Visit Example
</ButtonLink>
<ButtonLink href="https://example.com" variant="secondary" showArrow newTab>
Secondary
</ButtonLink>
<ButtonLink ariaLabel="GitHub" href="https://example.com" shape="icon" variant="ghost" newTab>
<Icon name="github" decorative />
</ButtonLink>
<ButtonLink ariaLabel="Website" href="https://example.com" shape="icon" variant="secondary" newTab>
<Icon name="globe" decorative />
</ButtonLink>
</div>---
import { ButtonLink, Icon } from '@santi020k/lumen-astro'
---
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
<ButtonLink href="https://example.com" showArrow newTab>
Visit Example
</ButtonLink>
<ButtonLink href="https://example.com" variant="secondary" showArrow newTab>
Secondary
</ButtonLink>
<ButtonLink ariaLabel="GitHub" href="https://example.com" shape="icon" variant="ghost" newTab>
<Icon name="github" decorative />
</ButtonLink>
<ButtonLink ariaLabel="Website" href="https://example.com" shape="icon" variant="secondary" newTab>
<Icon name="globe" decorative />
</ButtonLink>
</div>import { ButtonLink, Icon } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
<ButtonLink href="https://example.com" showArrow newTab>
Visit Example
</ButtonLink>
<ButtonLink href="https://example.com" variant="secondary" showArrow newTab>
Secondary
</ButtonLink>
<ButtonLink ariaLabel="GitHub" href="https://example.com" shape="icon" variant="ghost" newTab>
<Icon name="github" decorative />
</ButtonLink>
<ButtonLink ariaLabel="Website" href="https://example.com" shape="icon" variant="secondary" newTab>
<Icon name="globe" decorative />
</ButtonLink>
</div>
</>
)import { ButtonLink, Icon } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
<ButtonLink href="https://example.com" showArrow newTab>
Visit Example
</ButtonLink>
<ButtonLink href="https://example.com" variant="secondary" showArrow newTab>
Secondary
</ButtonLink>
<ButtonLink ariaLabel="GitHub" href="https://example.com" shape="icon" variant="ghost" newTab>
<Icon name="github" decorative />
</ButtonLink>
<ButtonLink ariaLabel="Website" href="https://example.com" shape="icon" variant="secondary" newTab>
<Icon name="globe" decorative />
</ButtonLink>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
<lumen-button-link href="https://example.com" showArrow newTab>
Visit Example
</lumen-button-link>
<lumen-button-link href="https://example.com" variant="secondary" showArrow newTab>
Secondary
</lumen-button-link>
<lumen-button-link ariaLabel="GitHub" href="https://example.com" shape="icon" variant="ghost" newTab>
<lumen-icon name="github" decorative></lumen-icon>
</lumen-button-link>
<lumen-button-link ariaLabel="Website" href="https://example.com" shape="icon" variant="secondary" newTab>
<lumen-icon name="globe" decorative></lumen-icon>
</lumen-button-link>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
<lumen-button-link href="https://example.com" showArrow newTab>
Visit Example
</lumen-button-link>
<lumen-button-link href="https://example.com" variant="secondary" showArrow newTab>
Secondary
</lumen-button-link>
<lumen-button-link ariaLabel="GitHub" href="https://example.com" shape="icon" variant="ghost" newTab>
<lumen-icon name="github" decorative></lumen-icon>
</lumen-button-link>
<lumen-button-link ariaLabel="Website" href="https://example.com" shape="icon" variant="secondary" newTab>
<lumen-icon name="globe" decorative></lumen-icon>
</lumen-button-link>
</div>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add ButtonLinklumen add ButtonLinkpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add ButtonLink --target reactlumen add ButtonLink --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add ButtonLink --target elementslumen add ButtonLink --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| href | string | - | Sets the link destination. |
| variant | "primary" | "secondary" | "ghost" | "inline" | "primary" | Controls the link emphasis. |
| shape | "default" | "icon" | "default" | Renders a round icon-only link when set to "icon". |
| showArrow | boolean | false | Appends a directional arrow icon. |
| newTab | boolean | false | Opens the link in a new tab with safe rel attributes. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |