Library · Media & Buttons

Button

A versatile button with variants, sizes, and delightful animations including hover effects and pulsating attention-draw. Renders as a <button>, or as an anchor styled identically via as="a" + href — use for CTAs that navigate (see the .button-cta skin).

Figma: Primitives / Button ↗

Default

---
import Button from "../components/primitives/button/Button.astro";
---
<Button variant="filled" type="default">Default Filled</Button>
<Button variant="filled" type="primary">Primary Filled</Button>
<Button variant="filled" type="secondary">Secondary Filled</Button>
<Button variant="outlined" type="primary">Primary Outlined</Button>
<Button variant="filled" type="success">Success Filled</Button>
<Button variant="filled" type="error" pulse>Error with Pulse</Button>
<Button variant="filled" type="primary" animateOnHover animationType="boop">
  Animate on Hover
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 12L12 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</Button>
<Button variant="filled" type="default" disabled>Disabled</Button>

Link

---
import Button from "../components/primitives/button/Button.astro";
---
<Button as="a" href="/contact">Link as Button</Button>
<Button as="a" href="/contact" variant="outlined" type="primary">Primary Outlined Link</Button>
<Button as="a" href="/contact" class="button-cta">Section CTA skin</Button>

Props

Name	Type	Required	Description
`as`	`'button' \| 'a'`	—	Element to render: a real button, or an anchor styled as a button (default: 'button')
`href`	`string`	—	The href attribute — required when as="a", ignored otherwise
`class`	`string`	—	Additional classes to apply to the button
`id`	`string`	—	The id attribute
`htmlType`	`'button' \| 'submit' \| 'reset'`	—	The HTML button type attribute (button element only) (default: 'button')
`disabled`	`boolean`	—	Whether the button is disabled (button element only)
`variant`	`'filled' \| 'outlined'`	—	The variant of the button (default: 'filled')
`type`	`'default' \| 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'`	—	The type of the button (affects color scheme) (default: 'default')
`size`	`'sm' \| 'md' \| 'lg'`	—	The size of the button
`ariaLabel`	`string`	—	The aria-label attribute
`ariaDescribedby`	`string`	—	The aria-describedby attribute
`animateOnHover`	`boolean`	—	Whether to animate the icon on hover (default: false)
`animationType`	`'rotate' \| 'boop' \| 'bouncing' \| 'nudge' \| 'none'`	—	Type of animation to apply on hover (default: "boop")
`animationIntensity`	`number`	—	Animation intensity (1-10) (default: 5)
`pulse`	`boolean`	—	Whether to apply a pulsating animation to draw attention (pulses 3 times) (default: false)
`[key: string]`	`any`	—	HTML attributes

Example with all props

<Button
  class="cta-button"
  id="enquiry-submit"
  htmlType="submit"
  variant="outlined"
  type="primary"
  size="lg"
  ariaLabel="Submit enquiry"
  ariaDescribedby="enquiry-hint"
  animateOnHover
  animationType="nudge"
  animationIntensity={5}
  pulse
  disabled={false}
>
  Submit enquiry
</Button>

<!-- Link form: renders an <a> with identical styling.
     htmlType/disabled don't apply; .button-cta is the section CTA skin. -->
<Button as="a" href="/contact" class="button-cta">
  Get in touch
</Button>