# Buttons

## 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.

```yaml
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.

<Aside type="tip">
  Keep one style per job: for example `3d-flip` with `color: "teal"` for main
  actions, and `variant: "text"` for "Read more" links. A page with five
  different hover effects looks unfinished.
</Aside>

### Icons In Buttons
`icon.name` accepts any [Lucide icon](https://lucide.dev/icons/) name (`ArrowRight`, `arrow-right`, `ArrowUpRight`) or the file name of an SVG in `src/assets/images/icons/custom/` (`caret-right`). See [Icons & Images](/consultiz/customization/icons-images/).

### Buttons In Markdown
In `.mdx` files, use the same component as a shortcode:

```mdx
<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](/consultiz/customization/writing-content/).