Button

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "button",
  "display_name": "Button",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "label": {
      "type": "text",
      "pos": 0,
      "required": true,
      "display_name": "Label",
      "description": "Visible button text"
    },
    "link": {
      "type": "multilink",
      "pos": 1,
      "display_name": "Link",
      "description": "Internal, external, or email destination"
    },
    "variant": {
      "type": "option",
      "pos": 2,
      "display_name": "Variant",
      "default_value": "primary",
      "options": [
        {
          "name": "Primary",
          "value": "primary"
        },
        {
          "name": "Secondary",
          "value": "secondary"
        },
        {
          "name": "Ghost",
          "value": "ghost"
        },
        {
          "name": "Link",
          "value": "link"
        }
      ]
    },
    "size": {
      "type": "option",
      "pos": 3,
      "display_name": "Size",
      "default_value": "medium",
      "options": [
        {
          "name": "Small",
          "value": "small"
        },
        {
          "name": "Medium",
          "value": "medium"
        },
        {
          "name": "Large",
          "value": "large"
        }
      ]
    },
    "full_width": {
      "type": "boolean",
      "pos": 4,
      "display_name": "Full Width",
      "default_value": false
    },
    "disabled": {
      "type": "boolean",
      "pos": 5,
      "display_name": "Disabled",
      "default_value": false
    }
  },
  "preview_field": "label"
}

# Button Component

## Purpose
Create an accessible CTA button that can render as `button` or `a` depending on whether a link is provided.

## Storyblok Schema Fields
- `label` (text, required)
- `link` (multilink)
- `variant` (option: primary, secondary, ghost, link)
- `size` (option: small, medium, large)
- `full_width` (boolean)
- `disabled` (boolean)

## Visual Requirements
- Primary: solid brand fill with white text.
- Secondary: outlined with brand border.
- Ghost: transparent background with subtle hover.
- Link: text button style.
- Include focus ring and smooth state transitions.

## Accessibility
- Use semantic element (`button` for action, `a` for navigation).
- Keep 44px touch target minimum.
- Add visible focus style and disabled handling.

## Example Props Structure
```ts
interface ButtonProps {
  label: string;
  link?: unknown;
  variant?: 'primary' | 'secondary' | 'ghost' | 'link';
  size?: 'small' | 'medium' | 'large';
  fullWidth?: boolean;
  disabled?: boolean;
}
```

## Edge Cases
- Missing link should still render valid button.
- Long label wraps or truncates gracefully.
- Disabled link must not navigate.

# @bloktastic/button

Installable Storyblok button schema with multiple variants and size options.

## Install

```bash
bloktastic add @bloktastic/button
```

## Highlights
- Primary/secondary/ghost/link variants
- Size controls
- Optional full-width mode
- Accessibility-friendly defaults