Button

import { Button } from "uilab-core"
import { ArrowUpIcon } from "lucide-react"

export function ButtonPreview() {
  return (

Usage

import { Button } from "uilab-core"

<Button variant="outline">Button</Button>

Examples

Sizes

Use the size prop to change the size of the button.

import { Button } from "uilab-core"
import { ArrowUpRightIcon } from "lucide-react"

export function ButtonSizesExample() {
  return (

Icon

import { Button } from "uilab-core"
import { CircleFadingArrowUpIcon } from "lucide-react"

export function ButtonIconExample() {
  return (
    <Button variant="outline" size="icon">
      <CircleFadingArrowUpIcon />
    </Button>
  )
}

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

import { Button } from "uilab-core"
import { GitBranchIcon, GitForkIcon } from "lucide-react"

export function ButtonWithIconExample() {
  return (

Rounded

Use the rounded-full class to make the button rounded.

import { Button } from "uilab-core"
import { ArrowUpIcon } from "lucide-react"

export function ButtonRoundedExample() {
  return (

Button

UsageCopy Anchor Link

ExamplesCopy Anchor Link

SizesCopy Anchor Link

IconCopy Anchor Link

With IconCopy Anchor Link