Folder: src/components/elements/
Low-level components used inside blocks and pages. No config slice — import directly and pass props.
Button
---
import Button from "@/components/elements/Button.astro";
---
<Button variant="brand" size="lg" href="/contact/">Get in touch</Button>
<Button variant="outline">Secondary</Button>
<Button variant="ghost" type="button">Dismiss</Button>| Prop | Values |
|---|---|
variant |
brand | outline | ghost |
size |
sm | md | lg |
href |
Renders <a> when set, <button> otherwise |
type |
button | submit | reset |
Text
Typography wrapper with semantic size tokens:
---
import Text from "@/components/elements/Text.astro";
---
<Text tag="h2" variant="displaySm" class="text-strong">Heading</Text>
<Text tag="p" variant="lg" class="text-soft">Body copy</Text>variant |
Tailwind class |
|---|---|
display |
text-display |
displaySm |
text-display-sm |
eyebrow |
text-eyebrow |
lg |
text-lg md:text-xl |
base |
text-base |
sm |
text-sm |
xs |
text-xs |
Icon
Inline SVG icons. Names: code, layout, stack, bolt, arrow-right, arrow-up-right, check, globe, send, menu, x, star, sun, moon, chevron-down, plus, minus.
<Icon name="arrow-right" size={18} />ThemeToggle
Light / dark mode control. Included in the navbar by default. Persists preference in localStorage under theme. Dark tokens live in theme.css.
---
import ThemeToggle from "@/components/elements/ThemeToggle.astro";
---
<ThemeToggle />Adding to a page
Elements are always inline — no blocks.ts entry. Import where needed:
---
import Button from "@/components/elements/Button.astro";
import Text from "@/components/elements/Text.astro";
---
<Text tag="h2" variant="displaySm">Custom heading</Text>
<Button href="/contact/" class="mt-6">Contact</Button>