The Blocksify Button block creates a call-to-action element with link, preset, icon, hover, and style controls. Use it while you create your first page and check responsive and hover editing.
At a glance
| Block name | blocksify/button |
| Role | Renders an inline-flex call-to-action with text, optional icon, and link settings. |
| Default tag | a, with button, div, and span available. |
| Presets | Fill and Outline. |
| Icon sources | Lucide, Custom SVG Code, and Custom Upload through the shared icon picker. |
| Key supports | Color, gradient background, typography, spacing, border, radius, shadow, size, position, visibility, and advanced settings. |
Where to find it
- Open the block inserter and choose Button. The Button is added to the page.
- Select the Button block on the canvas.
- Open the inspector and use General for tag, preset, icon, icon position, and link controls.
When to use it
Use a Button for a clear action such as reading more, starting a checkout, opening a contact page, or moving to another step. The block is built as an inline-flex element so text and an optional icon align as one control.
Inside a Section or Container, the Button can sit directly in the parent layout. Use the parent layout controls for broad alignment, then use the Button controls for the action itself.
Link and preset settings
The General panel owns the Button-specific controls. Link controls appear when the tag is a.
| Setting | What it controls |
| Tag | The output tag: a, button, div, or span. |
| Preset | Fill or Outline without changing unrelated style choices. |
| Link | URL, open-in-new-tab target, and rel tokens for link buttons. |
| Content | The button label. |
Icons
The Button uses the shared IconLibrary picker. Choose a Lucide icon, paste custom SVG code, or use Custom Upload for an uploaded SVG or image icon.
- Choose a Lucide icon from the built-in picker.
- Paste custom SVG code or upload an SVG when you need a custom icon.
- Icon position places the icon before or after the text.
Hover, spacing, and shape
Button hover styling uses the normal and hover states for supported color, spacing, border, radius, and shadow values. Fill buttons also have default hover feedback when no explicit hover color is set.
Use Spacing for padding and margin. Use Border, Radius & Shadow for the outline, corner radius, and shadow treatment.
Style capabilities
The Button style surface separates content settings from visual controls. The preset sets the starting look, and per-instance style choices can override it.
| Panel | What it controls |
| General | Tag, Fill or Outline preset, icon picker, icon position, and link settings. |
| Styling | Typography, text color, background color, and background gradient. |
| Spacing | Padding and margin. |
| Border, Radius & Shadow | Border, corner radius, and shadow. |
| Size & Position | Sizing, overflow, z-index, and position in one consolidated panel. |
| Visibility and Advanced | Per-device hide flags, anchor, custom CSS classes, and tag fallback. |
Tips
- Use Outline when the button should inherit the surrounding text color.
- Set an explicit hover color only when the default hover feedback is not enough.
- Keep icon choices simple so the text label remains the main action.
- Use padding for button size before changing width or height.