Button
Consistent controls for primary actions, secondary actions and icon shortcuts.
On this page
import Button from "@chitrank2050/monoline-docs/components/Button.astro";
<Button href="/">Get started</Button>Outline
For secondary actions, use the same surface and border treatment as Copy page. The label alone does not add clipboard behavior; attach your action in the consuming application.
View code
import Button from "@chitrank2050/monoline-docs/components/Button.astro";
<Button variant="outline">
<svg
slot="leadingIcon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
aria-hidden="true"
>
<rect x="8" y="8" width="12" height="12" rx="2" />
<path d="M16 8V4H4v12h4" />
</svg>
Copy page
</Button>Ghost and icon
Ghost buttons use a transparent surface. Icon-only controls require an accessible label.
View code
import Button from "@chitrank2050/monoline-docs/components/Button.astro";
<Button
variant="ghost"
size="icon"
aria-label="Open GitHub"
href="<https://github.com/chitranklabs/monoline-ui"
>
> <svg
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
>
<path d="
M 6.766 11.328 c -2.063 -.25 -3.516 -1.734 -3.516
-3.656 0 -.781 .281 -1.625 .75 -2.188 -.203 -.515
-.172 -1.609 .063 -2.062 .625 -.078 1.468 .25 1.968
.703 .594 -.187 1.219 -.281 1.985 -.281 .765 0 1.39
.094 1.953 .265 .484 -.437 1.344 -.765 1.969 -.687
.218 .422 .25 1.515 .046 2.047 .5 .593 .766 1.39 .766
2.203 0 1.922 -1.453 3.375 -3.547 3.64 .531 .344 .89
1.094 .89 1.954 v 1.625 c 0 .468 .391 .734 .86 .547 C
13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984
0 3.563 0 0 3.61 0 8.031 a 7.88 7.88 0 0 0 5.172 7.422
c .422 .156 .828 -.125 .828 -.547 v -1.25 c -.219 .094
-.5 .156 -.75 .156 -1.031 0 -1.64 -.562 -2.078 -1.609
-.172 -.422 -.36 -.672 -.719 -.719 -.187 -.015 -.25
-.093 -.25 -.187 0 -.188 .313 -.328 .625 -.328 .453 0
.844 .281 1.25 .86 .313 .452 .64 .655 1.031 .655 s
.641 -.14 1 -.5 c .266 -.265 .47 -.5 .657 -.656
" />
</svg>
</Button>Previous and next
Use a leading icon for Previous and a trailing icon for Next. Supply href and
rel="prev" or rel="next" for page navigation.
View code
import Button from "@chitrank2050/monoline-docs/components/Button.astro";
<nav
class="docs-button-navigation"
aria-label="Example page navigation"
>
<Button variant="outline" href="/" rel="prev">
<svg
slot="leadingIcon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
aria-hidden="true"
>
<path d="M19 12H5m7-7-7 7 7 7" />
</svg>
Previous
</Button>
<Button variant="outline" href="/writing/" rel="next">
Next
<svg
slot="trailingIcon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
aria-hidden="true"
>
<path d="M5 12h14m-7-7 7 7-7 7" />
</svg>
</Button>
</nav>API reference
| Name | Type | Default | Description |
|---|---|---|---|
variant | primary | outline | ghost | primary | Visual treatment. |
size | default | icon | default | Text or square icon control. |
href | string | — | Renders a link; internal routes honor the site base. |
type | button | submit | reset | button | Native button behavior. |
Accessibility and behavior
Use the leadingIcon and trailingIcon slots for decorative icons in any variant.
Uses native buttons and links. Standard HTML attributes pass through, including accessible labels and form attributes. Keyboard focus remains visible, mobile controls have 44px tap targets, and transitions respect reduced motion. No JavaScript is needed to render the component.