{
  "name": "filament-button",
  "title": "Filament Button",
  "description": "A quiet outline until you reach for it: on hover a short ember filament orbits the border like a heated wire, and on press the whole perimeter lights for an instant.",
  "category": "effects",
  "install": {
    "command": "npx shadcn@latest add @clow/filament-button",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "outline",
        "ghost"
      ],
      "default": "outline",
      "description": "outline keeps a resting hairline border; ghost has no border at rest, the filament draws it into existence."
    },
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "children": {
      "type": "text",
      "default": "Open relay console"
    }
  },
  "agent": {
    "prompt": "Use FilamentButton for one inviting secondary action on a landing page or hero: the kind of 'come closer' CTA that rewards hover (explore docs, watch the demo, open the console). It stays perfectly still at rest, so it never competes with the primary glow Button next to it. variant=outline for a visible resting border, ghost when it should disappear into the surface until hovered. Do NOT use it in forms, toolbars, dialogs, or dense product UI, and never as the primary CTA: that is Button territory (variant=glow). Under prefers-reduced-motion the orbit becomes a static lit border on hover.",
    "examples": [
      "<FilamentButton>Open relay console</FilamentButton>",
      "<FilamentButton variant=\"ghost\" size=\"lg\">Watch the demo</FilamentButton>",
      "<div className=\"flex gap-3\"><Button variant=\"glow\">Deploy now</Button><FilamentButton>Explore docs</FilamentButton></div>"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/filament-button",
    "markdown": "https://clow.cards/llms/filament-button.md",
    "registryItem": "https://clow.cards/r/filament-button.json"
  }
}
prop	type	default
variant	outline \| ghost	outline
size	sm \| md \| lg	md
disabled	boolean	false
children	text	Open relay console
Draw

Playground

Examples

Props
