Button

Description

The Button component is a flexible and customizable UI element designed for user interactions. It supports various styles, colors, and behaviors, making it suitable for a wide range of use cases in web applications. The component can be configured to display different visual styles, handle disabled states, and act as a link to internal or external resources.

Installation

bash

sabaccui add button

Usage

Here are some examples of how to use the Button component in a Storyblok block:

Default Primary Button

Preview

Click me

Outlined Secondary Button with Glow

Preview

Learn More

Disabled Gradient Button

Preview

Submit

Full-width Ghost Button:

Preview

Explore

Schema

Field	Type	Description	Default
`label`	`text`	The text displayed on the button. Required and translatable.	-
`link`	`multilink`	The destination URL for the button. Supports internal, external, and email links. Required.	-
`disabled`	`boolean`	When true, the button is non-interactive.	`false`
`block`	`boolean`	When true, the button spans the full width of its container.	`false`
`color`	`option`	The color scheme of the button. Options: gradient, primary, secondary, white, black, gray.	`primary`
`variant`	`option`	The visual style of the button. Options: default, outlined, ghost.	`default`
`glow`	`option`	Adds a glowing effect to the button. Options: gradient, primary, secondary, black, white, gray.	-

Notes

The component uses the useStoryblokHelpers() composable to handle link building.
The component is set up with inheritAttrs: false to prevent unwanted attribute inheritance.
The v-editable directive is used to enable in-editor content editing.

Best Practices:

Use clear and concise labels for buttons to improve user understanding.
Choose appropriate colors and variants to match your design system and maintain consistency.
Utilize the disabled state for buttons that are temporarily unavailable.
Consider using the glow effect sparingly to highlight important actions.
When using as a link, ensure the target attribute is set appropriately for external links.
Use the block property judiciously, as full-width buttons can impact layout and visual hierarchy.