Buttons

Usage

import {Button} from '@/ui'

const label = 'Click'

const handleClick = () => {
	alert('You clicked me!')
}

return (			
	<Button onClick={handleClick}>{label}</Button>
)

<button
	type='button'
	class='btn primary'
>
	Default
</button>

Colours

<Button 
	className='primary'
	onClick={handleClick}
>
	Primary
</Button>

<Button
	className='secondary'
	onClick={handleClick}
>
	Secondary
</Button>

<Button
	className='info'
	onClick={handleClick}
>
	Info
</Button>

<Button
	className='success'
	onClick={handleClick}
>
	Success
</Button>

<Button
	className='warning'
	onClick={handleClick}
>
	Warning
</Button>

<Button
	className='danger'
	onClick={handleClick}
>
	Danger
</Button>

<Button
	className='dark'
	onClick={handleClick}
>
	Dark
</Button>

<Button
	className='light'
	onClick={handleClick}
>
	Light
</Button>

<Button
	className='link'
	onClick={handleClick}
>
	Link
</Button>

Rounded

className='... rounded'

Pill

className='... pill'

Outline

className='... outline'

className='... outline rounded'

className='... outline pill'

Icons

import { PlayIcon } from '@heroicons/react/24/solid'

<Button
	className='primary icon'
	onClick={handleClick}
>
	<PlayIcon />
	<span className='sr-only'>Play</span>
</Button>

Circle

<Button
	className='primary icon circle'
	onClick={handleClick}
>
	<PlayIcon />
	<span className='sr-only'>Play</span>
</Button>

Outline

<Button
	className='primary icon outline'
	onClick={handleClick}
>
	<PlayIcon />
	<span className='sr-only'>Play</span>
</Button>

Circle Outline

<Button
	className='primary circle outline'
	onClick={handleClick}
>
	<PlayIcon />
	<span className='sr-only'>Play</span>
</Button>

Text with Icon

<Button
	className='primary icon circle'
	onClick={handleClick}
>
	<PlayIcon />
	<span className='sr-only'>Play</span>
</Button>

<Button
	className='danger rounded'
	onClick={handleClick}
>
	<TrashIcon /> Delete
</Button>

<Button
	className='dark outline'
	onClick={handleClick}
>
	More <EllipsisHorizontalIcon />
</Button>

<Button
	className='light pill outline'
	onClick={handleClick}
>
	<HeartIcon /> Like
</Button>

<Button
	className='link'
	onClick={handleClick}
>
	<ArrowDownOnSquareIcon /> Download
</Button>

Sizes

size='xs'
size='sm'
size='lg'
size='xl'

Disabled

<Button onClick={handleClick} disabled={disabled}>{label}</Button>

Toggle

const [toggle, setToggle] = useState(false)

<Button
	className={`${toggle ? 'light' : 'dark'} pill`}
	onClick={() => setToggle(!toggle)}
>
	<StarIcon /> Fave
</Button>

Options

size: 'xs' | 'sm' | 'lg' | 'xl' | undefined
className: string | undefined
id: string | undefined
title: string | undefined
onClick?: (e: any) => void | undefined
onBlur?: (e: any) => void | undefined
type?: 'submit' | 'reset' | 'button' | undefined
disabled?: boolean | undefined
tabindex?: number | undefined

<Button
	size='xl'
	className='secondary icon circle outline' // Any Tailwind classes can be added here
	id='reset'
	title='Reset'
	type='reset'
	onClick={handleClick}
>
	<ArrowPathRoundedSquareIcon />
	<span className='sr-only'>Repeat</span>
</Button>

CSS

.btn {
	@apply flex items-center font-semibold text-white p-[var(--button-p)] text-center text-base uppercase transition cursor-pointer outline-0 tracking-widest shadow;

	/* SIZES */
	&.xs {
		@apply text-xs p-[var(--button-p-xs)];
	}

	&.sm {
		@apply text-sm p-[var(--button-p-sm)];
	}

	&.lg {
		@apply text-2xl p-[var(--button-p-lg)];
	}

	&.xl {
		@apply text-4xl p-[var(--button-p-xl)];
	}

	/* ICON MARGIN - button with icon and text */
	&:not(.icon):has(> svg) {
		@apply flex gap-1;
	}

	/* ICON SIZES */
	& > svg {
		@apply w-8;
	}

	&.xs > svg {
		@apply w-4;
	}

	&.sm > svg {
		@apply w-6;
	}

	&.lg > svg {
		@apply w-10;
	}

	&.xl > svg {
		@apply w-14;
	}

	/* CORNERS */
	&.rounded {
		@apply rounded-md;
	}

	&.pill {
		@apply rounded-full px-[var(--button-p-lg)];
	}

	/* COLOURS */
	&.primary {
		@apply bg-primary;
	}

	&.secondary {
		@apply bg-secondary;
	}

	&.info {
		@apply bg-info;
	}

	&.success {
		@apply bg-success;
	}

	&.warning {
		@apply bg-warning;
	}

	&.danger {
		@apply bg-danger;
	}

	&.dark {
		@apply bg-dark;
	}

	&.light {
		@apply bg-light text-dark;
	}

	&.link {
		@apply bg-transparent text-primary !shadow-none;
	}

	/* OUTLINE */
	&.outline {
		@apply bg-light border-solid border-4 border-current text-current;

		&.primary {
			@apply text-primary;
		}

		&.secondary {
			@apply text-secondary;
		}

		&.info {
			@apply text-info;
		}

		&.success {
			@apply text-success;
		}

		&.warning {
			@apply text-warning;
		}

		&.danger {
			@apply text-danger;
		}

		&.dark {
			@apply text-dark;
		}

		&.light {
			@apply text-light bg-dark;
		}

		/* OUTLINE BORDERS */
		&.xs {
			@apply border;
		}

		&.sm {
			@apply border-2;
		}

		&.lg {
			@apply border-8;
		}

		&.xl {
			@apply border-12;
		}
	}

	/* STATE */
	&:hover {
		@apply scale-105 shadow-lg;
	}

	&:disabled {
		@apply cursor-default scale-100 !text-[var(--disabled-color)] border-[var(--disabled-color)] bg-[var(--neutral-color)] pointer-events-none;
	}

	&:focus {
		@apply scale-110 ring ring-accent;
	}

	&:focus-visible {
		@apply ring ring-accent;
	}

	/* ICONS */
	&.icon {
		@apply aspect-square;

		&.circle {
			@apply rounded-full;
		}                        
	}

}