Button

Enable user interaction with the button component to perform actions on your website as links, for payment, form submission, social buttons and more based on React and Tailwind CSS

Base

Typescript

import { Button } from 'alurkerja-ui'
export const ButtonPage = () => {
	return(
		<Button>Default</Button>
	)
}

isBlock()

Typescript

import { Button } from 'alurkerja-ui'
export const ButtonPage = () => {
	return(
		<Button isBlock={false}>Default</Button>
	)
}

loading()

Typescript

import { Button } from 'alurkerja-ui'
export const ButtonPage = () => {
	return(
		<Button loading>Loading</Button>
	)
}

variant()

Typescript

import { Button } from 'alurkerja-ui'
export const ButtonPage = () => {
	return(
		<Button variant='outlined'>Button</Button>
		<Button variant='filled'>Loading</Button>
		<Button variant='text'>Loading</Button>
	)
}

icon()

Typescript

import { Button } from 'alurkerja-ui'
import { Menu } from 'lucide-react'

export const ButtonPage = () => {
	return(
		<Button icon={<Menu />}>Button</Button>
		<Button icon={<Menu />} />
	)
}

color()

Typescript

import { Button } from 'alurkerja-ui'
export const ButtonPage = () => {
	return(
		<Button color='red'>Button</Button>
		<Button color='orange'>Button</Button>
		<Button color='greed'>Button</Button>
	)
}