BUTTON

Interactive trigger element with four semantic variants. Supports asChild for polymorphic rendering via Radix Slot.

DEPS:@radix-ui/react-slotclass-variance-authority

PREVIEW

INSTALLATION

BASH

npx shadcn@latest add @scificn/button

USAGE

TSX

import { Button } from '@/ui/button'

export function Example() {
  return (
    <Button variant="EXEC" size="MD">
      INITIATE SEQUENCE
    </Button>
  )
}

VARIANTS

variant="EXEC"

variant="OUTLINE"

variant="GHOST"

variant="ABORT"

SIZES

AS CHILD

Use asChild to render button styles on any element (e.g. a link).

TSX

import { Button } from '@/ui/button'
import { Link } from 'react-router-dom'

// Renders as <a> with Button styles
<Button asChild variant="EXEC">
  <Link to="/docs/introduction">READ DOCS</Link>
</Button>

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
variant	EXEC \| OUTLINE \| GHOST \| ABORT	OUTLINE	Visual style and semantic meaning of the button.
size	SM \| MD \| LG	MD	Controls height and horizontal padding.
asChild	boolean	false	Merge button props onto the child element instead of rendering a <button>.
disabled	boolean	false	Disables the button and reduces opacity.
className	string	—	Additional Tailwind classes merged via cn().