UILab

Button

"use client"

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

Usage

import { Button } from "uilab-core"
<Button variant="outline">Button</Button>

Examples

Sizes

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

"use client"

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

Icon

"use client"

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

With Icon

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

"use client"

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

Rounded

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

"use client"

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

On this page