Buttons

Overview

Buttons are clickable components aimed to trigger an action. Used for many reasons, it appears frequently in a form.

Copied !

import {
	Button,
	PrimaryButton,
	SuccessButton,
	SecondaryButton,
	WarningButton,
	DangerButton,
	InfoButton
} from "$components/button.component";
import { Icon } from "$components/icon.component";

export function OverviewButtonExample() {
	return (
		<>
			<Button>With Children</Button>
			<InfoButton text="With text props" />
			<Button text="Disabled" disabled />
			<PrimaryButton>Rounded</PrimaryButton>
			<DangerButton borderRadius="square" text="Square" />
			<SuccessButton borderRadius="arc" text="With Arc borderRadius" />
			<Button variant="inversed" borderRadius="circle">
				<Icon name="ri.edit-box-line" />
			</Button>
			<SecondaryButton borderRadius="curve" text="Curve" />
			<Button variant="outlined" text="Base button outlined" />
			<Button class="bg-slate-300 hover:bg-slate-800 text-slate-800 hover:text-slate-300 p-4" borderRadius="pill">
				Pill borderRadius with custom class
			</Button>
			<WarningButton borderRadius="circle" text="Circle" />
		</>
	);
}

Installation

Notes

To use this component, you need to initialize your project first. If not done yet, run one of the following command:

npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.

Go to the installation and usage page to learn more.

jsxpine add button

Copied !


	--------------------     Button Component   -------------------------

		import clsx from "clsx";

/**
 * @typedef HTMLButtonTagWithChildren
 * @type {import("@kitajs/html").PropsWithChildren<Omit<JSX.HtmlButtonTag, "className"> & import("../common/props").CLSXClassProps>}
 */

/**
 * @typedef {Object} ButtonProps
 * @type {{ text?: string } & HTMLButtonTagWithChildren & import("../common/props").BorderRadiusProps & import("../common/props").SizeProps & import("../common/props").VariantColorProps}
 */

/**
 * Button component props
 * @param {ButtonProps} props
 */
export function Button({
	children,
	class: className,
	size = "md",
	text,
	variant = "solid",
	borderRadius = "rounded",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "btn"],
		["outlined", "btn-outlined"],
		["inversed", "btn-inversed"]
	]);

	/**
	 * @type {Map<import("../common/types").SizeType, string>}
	 */
	const sizeMap = new Map([
		["xs", "text-xs px-2 py-1"],
		["sm", "px-4 py-2 text-sm"],
		["md", "px-4 py-2"],
		["lg", "px-8 py-4 text-lg"],
		["xl", "px-12 py-6 text-xl"],
		["2xl", "px-16 py-8 text-4xl"]
	]);

	/**
	 * @type {Map<import("../common/types").BorderRadiusType, string>}
	 */
	const borderRadiusMap = new Map([
		["square", "rounded-none"],
		["rounded", "rounded"],
		["arc", "rounded-xl"],
		["pill", "rounded-full"],
		["curve", "rounded-lg"],
		["circle", "aspect-square rounded-full"]
	]);

	return (
		<button
			class={clsx(
				variantColorMap.get(variant),
				sizeMap.get(size),
				borderRadiusMap.get(borderRadius),
				className
			)}
			{...restProps}
		>
			{text ? <span safe>{text}</span> : children}
		</button>
	);
}

/**
 * Primary Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function PrimaryButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-primary"],
		["outlined", "btn-primary-outlined"],
		["inversed", "btn-primary-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Secondary Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function SecondaryButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-secondary"],
		["outlined", "btn-secondary-outlined"],
		["inversed", "btn-secondary-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Success Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function SuccessButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-success"],
		["outlined", "btn-success-outlined"],
		["inversed", "btn-success-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Danger Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function DangerButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-danger"],
		["outlined", "btn-danger-outlined"],
		["inversed", "btn-danger-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Info Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function InfoButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-info"],
		["outlined", "btn-info-outlined"],
		["inversed", "btn-info-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Warning Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function WarningButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-warning"],
		["outlined", "btn-warning-outlined"],
		["inversed", "btn-warning-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

Alpine Interop

We can use alpine properties such as @click or x:on-click.

Copied !

import { Button } from "$components/button.component"

export function AlpineInteropButtonExample() {
    return (
        <Button x-on:click="console.log('clicked')" text="Click Me" />
    )
}

Primary Button

We use the primary button for main actions like saving a form or creating a new item.

Copied !

import { PrimaryButton } from "$components/button.component";

export function PrimaryButtonExample() {
	return (
		<>
			<PrimaryButton text="Primary Button" />
			<PrimaryButton variant="outlined" text="Primary Outlined" />
			<PrimaryButton variant="inversed" text="Primary Inversed" />
		</>
	);
}

Secondary Button

Secondary buttons accompany primary buttons to provide additional actions.

For example, cancel buttons can be considered as secondary buttons.

Copied !

import { SecondaryButton } from "$components/button.component";

export function SecondaryButtonExample() {
	return (
		<>
			<SecondaryButton text="Secondary Button" />
			<SecondaryButton variant="outlined" text="Secondary Outlined" />
			<SecondaryButton variant="inversed" text="Secondary Inversed" />
		</>
	);
}

Success Button

Success buttons give positive attempt to actions.

Copied !

import { SuccessButton } from "$components/button.component";

export function SuccessButtonExample() {
	return (
		<>
			<SuccessButton text="Success Button" />
			<SuccessButton variant="outlined" text="Success Outlined" />
			<SuccessButton variant="inversed" text="Success Inversed" />
		</>
	);
}

Danger Button

Danger buttons are useful to prevent/cancel actions.

Copied !

import { DangerButton } from "$components/button.component";

export function DangerButtonExample() {
	return (
		<>
			<DangerButton text="Danger Button" />
			<DangerButton variant="outlined" text="Danger Outlined" />
			<DangerButton variant="inversed" text="Danger Inversed" />
		</>
	);
}

Info Button

Info buttons are mostly used for informative actions.

Copied !

import { InfoButton } from "$components/button.component";

export function InfoButtonExample() {
	return (
		<>
			<InfoButton text="Info Button" />
			<InfoButton variant="outlined" text="Info Outlined" />
			<InfoButton variant="inversed" text="Info Inversed" />
		</>
	);
}

Warning Button

Warning buttons are often used for risky actions.

Copied !

import { WarningButton } from "$components/button.component";

export function WarningButtonExample() {
	return (
		<>
			<WarningButton text="Warning Button" />
			<WarningButton variant="outlined" text="Warning Outlined" />
			<WarningButton variant="inversed" text="Warning Inversed" />
		</>
	);
}

Size Props

Size props apply different sizes to the button, precisely a mix of margin-x, margin-y and font-size.

Copied !

import {
	Button,
	InfoButton,
	PrimaryButton,
	SecondaryButton,
	SuccessButton
} from "$components/button.component";

export function SizeButtonExample() {
	return (
		<>
			<Button size="xs">Size xs</Button>
			<InfoButton text="Size sm" size="sm" />
			<PrimaryButton>Size md</PrimaryButton>
			<Button borderRadius="square" text="Size lg" size="lg" />
			<SuccessButton borderRadius="arc" text="Size xl" size="xl" />
			<SecondaryButton borderRadius="curve" text="Size 2xl" size="2xl" />
		</>
	);
}