Button

Button with optional left and right slots for icons or extra labels. Use variant for primary (default), secondary, or ghost, and size for normal (default) or compact.

ButtonExamples.tsrx
import { Button } from "@octaneui/core";
import { ArrowRight, Plus } from "@octaneui/icons/lucide";

export function ButtonExamples() @{
  <>
    <Button>Save</Button>
    <Button left={<Plus size={16} />}>Add item</Button>
    <Button right={<ArrowRight size={16} />}>Continue</Button>
    <Button left={<Plus size={16} />} right={<ArrowRight size={16} />}>
      Export
    </Button>
    <Button disabled>Disabled</Button>
  </>
}

Variants

ButtonVariantExample.tsrx
import { Button } from "@octaneui/core";

export function ButtonVariantExample() @{
  <>
    <Button>Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="ghost">Ghost</Button>
  </>
}

Sizes

ButtonSizeExample.tsrx
import { Button } from "@octaneui/core";

export function ButtonSizeExample() @{
  <>
    <Button size="compact">Compact</Button>
    <Button>Normal</Button>
    <Button size="compact" variant="secondary">
      Compact
    </Button>
    <Button variant="secondary">Normal</Button>
  </>
}