Badges

Find the source code here.

Overview

Badges are pretty component made to emphasis some information, generally a word (e.g: hashtag).

See below different types of badges JSXPine provides.

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 badge

Copied !


	--------------------     Badge Component   -------------------------

		import clsx from "clsx";

/**
 * @typedef {"square" | "pill"} BadgeType
 */

/**
 * @typedef BadgeProps
 * @type {{ text?: string, type?: BadgeType } & import("../common/props").HTMLTagWithChildren & import("../common/props").VariantColorProps}
 */

/**
 * Badge component props
 * @param {BadgeProps} props
 */
export function Badge({
	children,
	text = "",
	variant = "solid",
	type = "pill",
	class: className,
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantMap = new Map([
		["solid", "bg-base text-background"],
		["outlined", "bg-base-light text-base-dark"],
		["inversed", "border border-muted-foreground text-muted-foreground"]
	]);

	/**
	 * @type {Map<BadgeType, string>}
	 */
	const badgeTypeMap = new Map([
		["pill", "rounded-full"],
		["square", "rounded-none"]
	]);
	return (
		<div
			class={clsx(
				"px-4 py-1 ",
				badgeTypeMap.get(type),
				className ?? variantMap.get(variant)
			)}
			{...restProps}
		>
			{text || children}
		</div>
	);
}

/**
 * Primary Badge component props
 * @param {BadgeProps} props
 */
export function PrimaryBadge({
	children,
	class: className,
	variant = "solid",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "bg-primary text-primary-foreground"],
		["outlined", "bg-primary-light text-primary-dark"],
		["inversed", "border border-primary text-primary"]
	]);

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

/**
 * Secondary Badge component props
 * @param {BadgeProps} props
 */
export function SecondaryBadge({
	children,
	class: className,
	variant = "solid",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "bg-secondary text-secondary-foreground"],
		["outlined", "bg-secondary-light text-secondary"],
		["inversed", "border border-secondary text-secondary"]
	]);

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

/**
 * Success Badge component props
 * @param {BadgeProps} props
 */
export function SuccessBadge({
	children,
	class: className,
	variant = "solid",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "bg-success text-success-foreground"],
		["outlined", "bg-success-light text-success-dark"],
		["inversed", "border border-success text-success"]
	]);

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

/**
 * Danger Badge component props
 * @param {BadgeProps} props
 */
export function DangerBadge({
	children,
	class: className,
	variant = "solid",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "bg-danger text-danger-foreground"],
		["outlined", "bg-danger-light text-danger-dark"],
		["inversed", "border border-danger text-danger"]
	]);

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

/**
 * Info Badge component props
 * @param {BadgeProps} props
 */
export function InfoBadge({
	children,
	class: className,
	variant = "solid",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "bg-info text-info-foreground"],
		["outlined", "bg-info-light text-info-dark"],
		["inversed", "border border-info text-info"]
	]);

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

/**
 * Warning Badge component props
 * @param {BadgeProps} props
 */
export function WarningBadge({
	children,
	class: className,
	variant = "solid",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "bg-warning text-warning-foreground"],
		["outlined", "bg-warning-light text-warning-dark"],
		["inversed", "border border-warning text-warning"]
	]);

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

Default Badge

Pill

#Square

Outlined

Inversed

Copied !

import { Badge } from "$components/badge.component";

export function DefaultBadgeExample() {
	return (
		<>
			<Badge text="Pill" />
			<Badge type="square" text="#Square" />
			<Badge text="Outlined" variant="outlined" />
			<Badge text="Inversed" variant="inversed" />
		</>
	);
}

Primary Badge

Primary

#Square

Outlined

Inversed

Copied !

import { PrimaryBadge } from "$components/badge.component";

export function PrimaryBadgeExample() {
	return (
		<>
			<PrimaryBadge text="Primary" />
			<PrimaryBadge type="square" text="#Square" />
			<PrimaryBadge text="Outlined" variant="outlined" />
			<PrimaryBadge text="Inversed" variant="inversed" />
		</>
	);
}

Secondary Badge

Secondary

#Square

Outlined

Inversed

Copied !

import { SecondaryBadge } from "$components/badge.component";

export function SecondaryBadgeExample() {
	return (
		<>
			<SecondaryBadge text="Secondary" />
			<SecondaryBadge type="square" text="#Square" />
			<SecondaryBadge text="Outlined" variant="outlined" />
			<SecondaryBadge text="Inversed" variant="inversed" />
		</>
	);
}

Success Badge

Success

#Square

Outlined

Inversed

Copied !

import { SuccessBadge } from "$components/badge.component";

export function SuccessBadgeExample() {
	return (
		<>
			<SuccessBadge text="Success" />
			<SuccessBadge type="square" text="#Square" />
			<SuccessBadge text="Outlined" variant="outlined" />
			<SuccessBadge text="Inversed" variant="inversed" />
		</>
	);
}

Danger Badge

Danger

#Square

Outlined

Inversed

Copied !

import { DangerBadge } from "$components/badge.component";

export function DangerBadgeExample() {
	return (
		<>
			<DangerBadge text="Danger" />
			<DangerBadge type="square" text="#Square" />
			<DangerBadge text="Outlined" variant="outlined" />
			<DangerBadge text="Inversed" variant="inversed" />
		</>
	);
}

Info Badge

Info

#Square

Outlined

Inversed

Copied !

import { InfoBadge } from "$components/badge.component";

export function InfoBadgeExample() {
	return (
		<>
			<InfoBadge text="Info" />
			<InfoBadge type="square" text="#Square" />
			<InfoBadge text="Outlined" variant="outlined" />
			<InfoBadge text="Inversed" variant="inversed" />
		</>
	);
}

Warning Badge

Warning

#Square

Outlined

Inversed

Copied !

import { WarningBadge } from "$components/badge.component";

export function WarningBadgeExample() {
	return (
		<>
			<WarningBadge text="Warning" />
			<WarningBadge type="square" text="#Square" />
			<WarningBadge text="Outlined" variant="outlined" />
			<WarningBadge text="Inversed" variant="inversed" />
		</>
	);
}