@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/components/Sidebar.tsx

@@ -1,12 +1,40 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react';
+import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
 
 import { THEME_OPTIONS } from '../shares/theme';
 
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
+
+type BuildInformationProps = {
+	buildDate?: string | null;
+	commitHash?: string | null;
+};
+const BuildInformation: FC<BuildInformationProps> = ({ buildDate, commitHash }) => {
+	if (!buildDate && !commitHash) {
+		return '';
+	}
+
+	return (
+		<div className="text-sm font-mono color-gray-5 m-t-2">
+			{buildDate && commitHash ? ( // date and hash provided
+				<>
+					Build: {commitHash}
+					<br />
+					at {buildDate}
+				</>
+			) : commitHash ? ( // hash only
+				`Build: ${commitHash}`
+			) : (
+				// date only
+				`Build date: ${buildDate}`
+			)}
+		</div>
+	);
+};
+
 type Props = {
 	version: string;
 	theme: string;
@@ -25,7 +53,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
 
 	const handleThemeSelectChange = (_event: Event, value: unknown) => {
-		onThemeChange((value as [string])[0]);
+		onThemeChange(value as string);
 	};
 
 	const handlePreviousClick = () => {
@@ -47,16 +75,8 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					<KolHeading _label="KoliBri React"></KolHeading>
 					<KolVersion _label={version}></KolVersion>
 				</div>
-				{(buildDate || commitHash) && (
-					<div className="text-sm font-mono color-gray-5 m-t-2">
-						{commitHash ? `Build: ${commitHash}` : ''}
-						<br />
-						{buildDate ? `at ${buildDate}` : ''}
-					</div>
-				)}
-
-				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
-
+				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
+				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
 				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
@@ -65,7 +85,6 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					</span>
 					<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
-
 				<Navigation routes={routes} />
 			</div>
 		</aside>

package/src/components/abbr/basic.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { KolAbbr } from '@public-ui/react';
+import { KolAbbr } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 export const AbbrBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAbbr shows an abbreviation and the full form in parentheses, if provided.</p>
+			<p>KolAbbr shows an abbreviation and uses kol-tooltip-wc to display the long form, if provided.</p>
 		</SampleDescription>
 
 		<p>

package/src/components/accordion/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolAccordion } from '@public-ui/react';
+import { KolAccordion, KolCombobox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -15,11 +15,15 @@ export const AccordionBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolAccordion _label="Heading Accordion Tab 1">Contents Accordion Tab 1</KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 1 (open)" _open>
+				<KolCombobox _label="Combobox in Accordion" _suggestions="['Herr','Frau','Firma']" />
+			</KolAccordion>
 			<KolAccordion _label="Heading Accordion Tab 2">Contents Accordion Tab 2</KolAccordion>
-			<KolAccordion _label="Heading Accordion Tab 2 (deactivated)" _disabled></KolAccordion>
-			<KolAccordion _label="Heading Accordion Tab 2 (disabled and open)" _disabled _open>
-				Contents Accordion Tab 2
+			<KolAccordion _label="Heading Accordion Tab 3 (deactivated)" _disabled>
+				Contents Accordion Tab 3
+			</KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 4 (disabled and open)" _disabled _open>
+				Contents Accordion Tab 4
 			</KolAccordion>
 		</div>
 	</>

package/src/components/accordion/headlines.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolAccordion } from '@public-ui/react';
+import { KolAccordion } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const AccordionHeadlines: FC = () => (

package/src/components/alert/basic.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import { KolAlert } from '@public-ui/react';
+import type { AlertTypePropType, AlertVariantPropType, HeadingLevel } from '@public-ui/components';
+import { KolAlert } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import type { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 type PropsByType = {
 	level: HeadingLevel;
-	type: AlertType;
-	variant: AlertVariant;
+	type: AlertTypePropType;
+	variant: AlertVariantPropType;
 };
 type PropsBasic = {
-	variant?: AlertVariant;
+	variant?: AlertVariantPropType;
 };
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (

package/src/components/alert/card-msg.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { AlertVariants } from './basic';
 import { SampleDescription } from '../SampleDescription';
+import { AlertVariants } from './basic';
 
 export const AlertCardMsg: FC = () => (
 	<>

package/src/components/alert/html.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { KolAlert, KolHeading } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
+import { KolAlert, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const AlertHtml: FC = () => (
 	<>

package/src/components/avatar/basic.tsx

@@ -1,12 +1,15 @@
-import { KolAvatar } from '@public-ui/react';
-import React from 'react';
+import { KolAvatar } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const AvatarBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAlert shows a user&apos;s avatar. It can be used with or without an image. If no image is defined, the name&apos;s initials are shown instead.</p>
+			<p>
+				KolAvatar shows a user&apos;s avatar with customizable colors. It can be used with or without an image. If no image is defined, the name&apos;s initials
+				are shown instead with a configurable background color.
+			</p>
 		</SampleDescription>
 
 		<div className="flex flex-wrap gap-4">
@@ -15,6 +18,7 @@ export const AvatarBasic: FC = () => (
 			{/* intentional trailing space    👇 - it's supposed to be trimmed */}
 			<KolAvatar _label="Elke Mustermann " />
 			<KolAvatar _label="Marianne" />
+			<KolAvatar _color="#0000FF" _label="Christian" />
 		</div>
 	</>
 );

package/src/components/badge/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolBadge } from '@public-ui/react';
+import { KolBadge } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -11,7 +11,7 @@ export const BadgeBasic: FC = () => (
 			<p>KolBadge shows badges with a label, background color and optional icon.</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge _label="black"></KolBadge>
 			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
 			<KolBadge _color="#06539e" _label="blue"></KolBadge>

package/src/components/badge/button.tsx

@@ -1,14 +1,15 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolBadge } from '@public-ui/react';
+import { KolBadge } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const createBadgeProps = (label: string) => ({
 	_label: label,
 	_smartButton: {
+		_ariaDescription: label,
 		_icons: 'codicon codicon-close',
-		_label: `Remove ${label}`,
+		_label: `Remove`,
 		_on: {
 			onClick: () => alert('clicked'),
 		},
@@ -23,7 +24,7 @@ export const BadgeButton: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge {...createBadgeProps('black')}></KolBadge>
 			<KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
 			<KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>

package/src/components/badge/formatted-label.tsx

@@ -0,0 +1,19 @@
+import { KolBadge } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const FormattedLabel = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample demonstrates the possibility of formatted text in badges via markdown syntax.</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4">
+				<KolBadge _color="#7db4ebff" _label="**Bold** and _italic_ Markdown label" />
+				<KolBadge _color="#8feb7dff" _label="This is ~~strikethrough~~ text" />
+				<KolBadge _color="#e6ee8eff" _label="Source code like `y = mx + n` is possible" />
+			</div>
+		</>
+	);
+};

package/src/components/badge/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../../shares/types';
 import { BadgeBasic } from './basic';
 import { BadgeButton } from './button';
+import { FormattedLabel } from './formatted-label';
 
 export const BADGE_ROUTES: Routes = {
 	badge: {
 		basic: BadgeBasic,
 		button: BadgeButton,
+		'formatted-label': FormattedLabel,
 	},
 };

package/src/components/breadcrumb/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolBreadcrumb } from '@public-ui/react';
+import { KolBreadcrumb } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -56,6 +56,7 @@ export const BreadcrumbBasic: FC = () => (
 					},
 				]}
 			></KolBreadcrumb>
+			<KolBreadcrumb _label="Minimal Breadcrumb" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>
 		</div>
 	</>
 );

package/src/components/button/access-key.tsx

@@ -1,8 +1,8 @@
-import { KolButton, KolLink } from '@public-ui/react';
-import React from 'react';
+import { KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonAccessKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -15,25 +15,43 @@ export const ButtonAccessKey: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolButton with{' '}
-					<KolLink _label="access keys" _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey" _target="blank" />. The access
-					keys can be used to trigger the buttons using the keyboard.
+					This story demonstrates buttons with{' '}
+					<KolLink _label="access keys" _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey" _target="blank" />. Access keys
+					allow users to trigger buttons using keyboard shortcuts.
 				</p>
 			</SampleDescription>
 
-			<div className="flex flex-wrap gap-4">
-				<KolButton _label="With S access key" _accessKey="S" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Very small s" _accessKey="s" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Access key does not appear in label" _accessKey="x" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
-				<KolButton
-					_label="with inline icons"
-					_icons={{
-						left: 'codicon codicon-dashboard',
-						right: 'codicon codicon-dashboard',
-					}}
-					_accessKey="s"
-				/>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with Access Keys" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="With S access key" _accessKey="S" _on={dummyEventHandler} />
+						<KolButton _label="Very small b" _accessKey="b" _on={dummyEventHandler} />
+						<KolButton _label="Access key does not appear in label" _accessKey="x" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Access Key with Hidden Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="access key without label" _hideLabel _accessKey="a" _icons="codicon codicon-dashboard" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Access Key with Inline Icons" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_label="with inline icons"
+							_icons={{
+								left: 'codicon codicon-dashboard',
+								right: 'codicon codicon-dashboard',
+							}}
+							_accessKey="n"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/button/aria-description.tsx

@@ -1,8 +1,8 @@
-import { KolButton } from '@public-ui/react';
-import React from 'react';
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonAriaDescription: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -14,12 +14,20 @@ export const ButtonAriaDescription: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolButton with aria-description</p>
+				<p>
+					This story demonstrates buttons with ARIA descriptions. The aria-description attribute provides additional descriptive text for screen readers,
+					helping users understand the button&apos;s purpose or action in more detail.
+				</p>
 			</SampleDescription>
 
-			<div className="flex flex-wrap gap-4">
-				<KolButton _label="Button Text without area description" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Button Text" _ariaDescription="Button Area Description" _on={dummyEventHandler}></KolButton>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with and without ARIA Description" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Button without ARIA description" _on={dummyEventHandler} />
+						<KolButton _label="Button with ARIA description" _ariaDescription="This button performs an important action" _on={dummyEventHandler} />
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/button/baselined.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react';
-
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonBaselined: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -16,14 +14,20 @@ export const ButtonBaselined: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
+				<p>
+					This story demonstrates button baseline alignment. It shows multiple buttons with and without icons that are vertically aligned, useful for testing
+					layout consistency.
+				</p>
 			</SampleDescription>
 
-			<div className="flex">
-				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
-				<KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon" _on={dummyEventHandler}></KolButton>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Vertically Aligned Buttons" />
+					<div className="flex flex-wrap gap-2">
+						<KolButton _label="Label-Text" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon" _on={dummyEventHandler} />
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/button/basic.tsx

@@ -1,16 +1,88 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { ButtonVariants } from './partials/variants';
+import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
-export const ButtonBasic: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				KolButton shows a button-element. This sample demonstrates the basic usage with its different styling variants, icons, disabled state and hidden labels.
-			</p>
-		</SampleDescription>
+export const ButtonBasic: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<ButtonVariants />
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This story demonstrates the most important features of the KolButton component. It showcases the different button variants, icons, disabled state, and
+					hidden labels.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				{/* Button Variants */}
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Button Variants" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				{/* Disabled State */}
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Disabled State" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				{/* Hidden Label */}
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Hidden Label (Icon Only)" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _hideLabel _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				{/* Icon Positions */}
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Icon Positions" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								left: 'codicon codicon-arrow-left',
+							}}
+							_label="Icon Left"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								right: 'codicon codicon-arrow-right',
+							}}
+							_label="Icon Right"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								left: 'codicon codicon-arrow-left',
+								right: 'codicon codicon-arrow-right',
+							}}
+							_label="Icons Both Sides"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/components/button/disabled.tsx

@@ -0,0 +1,43 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonDisabled: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This story demonstrates the disabled state of buttons. Disabled buttons are not clickable and appear visually dimmed.</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Disabled Buttons" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Comparison: Enabled vs Disabled" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="codicon codicon-home" _label="Enabled" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _icons="codicon codicon-home" _label="Disabled" _variant="primary" _on={dummyEventHandler} />
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};