Buttons

Files: any content file with a button: block · Component: src/layouts/components/Button.astro · Skill level: Beginner

Every button in Consultiz’s content files (banners, sections, pricing plans, forms, the page header) is drawn by one component, so they all take the same options. The full list is the sharedButton schema at the top of src/sections.schema.ts, and many content files repeat it in a comment next to the button.

button:
  enable: true
  label: "Schedule a consultation"
  url: "/contact/"           # a page on your site, a file, a full https:// address, or #anchor
  variant: "fill"            # fill | outline | text | circle
  hoverEffect: "3d-flip"     # bg-flip | icon-flip | creative-fill | 3d-flip | shine
  color: "teal"              # lime | white | dark | teal (3d-flip and shine)
  width: "full"              # auto | full
  class: "btn-dark"          # color class, plus any extra classes
  icon:
    enable: true
    name: "ArrowRight"       # a Lucide icon name or a custom icon file name
    position: "right"        # left | right
    size: "sm"               # xs | sm | md | lg

Set enable: false to hide a button without deleting it.

All Options

Option	Values	What it does
`label`	Text	The button text (required)
`url`	`/contact/`, `/downloads/report.pdf`, `https://…`, `#section`	Where it goes. Page paths get the language prefix for you; files and `#` anchors are used as they are
`enable`	`true` · `false`	Shows or hides the button
`variant`	`fill` (default) · `outline` · `text` · `circle`	The shape
`hoverEffect`	`bg-flip` · `icon-flip` · `creative-fill` · `3d-flip` · `shine`	The hover animation. Leave it out for a plain hover
`color`	`lime` (default) · `white` · `dark` · `teal`	The color of `3d-flip` and `shine` buttons
`class`	`btn-primary` · `btn-dark` · `btn-outline`, plus any classes	The color of the other buttons, and extra classes such as `w-full`
`width`	`auto` · `full`	`full` stretches the button to its container
`icon`	`enable`, `name`, `position`, `size`, `className`	An icon beside the label
`target`, `rel`	`"_blank"`, `"nofollow"`, …	Link attributes. Links to `http` addresses open in a new tab with `noopener noreferrer` automatically
`tag`, `buttonType`	`a` (default) · `button`; `button` · `submit` · `reset`	Use `tag: "button"` and `buttonType: "submit"` for form buttons
`title`	Text	A tooltip, and the accessible name of icon-only buttons

The Five Hover Effects

`hoverEffect`	What it does	Works with
`bg-flip`	The background and label slide up and are replaced from below	`fill` and `circle` buttons
`icon-flip`	An icon scales in before the label as the one after it scales out	Buttons with an `icon`
`creative-fill`	The button floods with color from the edges	Any variant, often `btn-outline`
`3d-flip`	The label flips like a card and the icon shifts	Set its color with `color`
`shine`	A light sweep crosses the button and the icon nudges right	Set its color with `color`

text buttons with an icon rotate the icon on hover without any hoverEffect.

Generic labels such as “Read more”, “Learn more”, or “Lire la suite” get the button’s title added as hidden text, so screen readers and search engines know where the link goes. Sections that link to a post or page pass its title for you; on a button you write yourself, set title. The /components/ page of the theme shows every effect with the code beside it.

Icons In Buttons

icon.name accepts any Lucide icon name (ArrowRight, arrow-right, ArrowUpRight) or the file name of an SVG in src/assets/images/icons/custom/ (caret-right). See Icons & Images.

Buttons In Markdown

In .mdx files, use the same component as a shortcode:

<Button
  label="Book a consultation"
  url="/contact/"
  hoverEffect="bg-flip"
  class="btn-primary w-fit"
  icon={{ enable: true, name: "ArrowUpRight", position: "right" }}
/>

See Writing Content.