@public-ui/sample-react 4.0.0-alpha.4 → 4.0.0-alpha.5

package/public/assets/material-symbols/package.json

@@ -1,41 +1,41 @@
 {
-  "name": "material-symbols",
-  "version": "0.5.5",
-  "description": "Latest variable icon fonts and CSS for Material Symbols.",
-  "main": "index.css",
-  "sass": "index.scss",
-  "types": "index.d.ts",
-  "files": [
-    "index.d.ts",
-    "*.{css,scss,woff2}"
-  ],
-  "scripts": {
-    "build": "sass --no-source-map --no-error-css ."
-  },
-  "devDependencies": {
-    "sass": "1.56.1"
-  },
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/marella/material-symbols.git",
-    "directory": "material-symbols"
-  },
-  "bugs": {
-    "url": "https://github.com/marella/material-symbols/issues"
-  },
-  "homepage": "https://marella.github.io/material-symbols/demo/",
-  "keywords": [
-    "material-symbols",
-    "material-icons",
-    "material-design-icons",
-    "material-design",
-    "material",
-    "symbols",
-    "icons",
-    "font"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "material-symbols",
+	"version": "0.5.5",
+	"description": "Latest variable icon fonts and CSS for Material Symbols.",
+	"main": "index.css",
+	"sass": "index.scss",
+	"types": "index.d.ts",
+	"files": [
+		"index.d.ts",
+		"*.{css,scss,woff2}"
+	],
+	"scripts": {
+		"build": "sass --no-source-map --no-error-css ."
+	},
+	"devDependencies": {
+		"sass": "1.56.1"
+	},
+	"license": "Apache-2.0",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/marella/material-symbols.git",
+		"directory": "material-symbols"
+	},
+	"bugs": {
+		"url": "https://github.com/marella/material-symbols/issues"
+	},
+	"homepage": "https://marella.github.io/material-symbols/demo/",
+	"keywords": [
+		"material-symbols",
+		"material-icons",
+		"material-design-icons",
+		"material-design",
+		"material",
+		"symbols",
+		"icons",
+		"font"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
 }

package/src/components/avatar/basic.tsx

@@ -6,7 +6,10 @@ 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/button/access-key.tsx

@@ -1,4 +1,4 @@
-import { KolButton, KolLink } from '@public-ui/react-v19';
+import { KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
@@ -15,26 +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 b" _accessKey="b" _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="a" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
-				<KolButton
-					_label="with inline icons"
-					_icons={{
-						left: 'codicon codicon-dashboard',
-						right: 'codicon codicon-dashboard',
-					}}
-					_accessKey="n"
-					_on={dummyEventHandler}
-				/>
+			<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,4 +1,4 @@
-import { KolButton } from '@public-ui/react-v19';
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { useToasterService } from '../../hooks/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,8 +1,6 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react-v19';
-
+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';
 
@@ -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 flex-wrap gap-2">
-				<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 { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
-import { ButtonVariants } from './partials/variants';
 
-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>
+		</>
+	);
+};

package/src/components/button/expert-slot.tsx

@@ -1,16 +1,53 @@
+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';
-import { ButtonVariants } from './partials/variants';
 
-export const ButtonExpertSlot: FC = () => (
-	<>
-		<SampleDescription>
-			<p>KolButton show a button-element with expert slot.</p>
-		</SampleDescription>
+export const ButtonExpertSlot: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<ButtonVariants _label="">
-			<span slot="expert">I am more than just a button</span>
-		</ButtonVariants>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced
+					customization options beyond the standard label and icon properties.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with Expert Slot Content" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="codicon codicon-home" _label="" _variant="primary" _on={dummyEventHandler}>
+							<span slot="expert">I am more than just a button</span>
+						</KolButton>
+						<KolButton _icons="codicon codicon-heart" _label="" _variant="secondary" _on={dummyEventHandler}>
+							<span slot="expert">Custom content here</span>
+						</KolButton>
+						<KolButton _icons="codicon codicon-trash" _label="" _variant="danger" _on={dummyEventHandler}>
+							<span slot="expert">Delete with custom text</span>
+						</KolButton>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Disabled Buttons with Expert Slot" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _icons="codicon codicon-home" _label="" _variant="primary" _on={dummyEventHandler}>
+							<span slot="expert">Disabled expert slot</span>
+						</KolButton>
+						<KolButton _disabled _icons="codicon codicon-reactions" _label="" _variant="ghost" _on={dummyEventHandler}>
+							<span slot="expert">Another disabled one</span>
+						</KolButton>
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/components/button/hide-label.tsx

@@ -0,0 +1,57 @@
+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 ButtonHideLabel: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This story demonstrates buttons with hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This
+					is useful for icon-only buttons.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with Hidden Labels" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _hideLabel _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-bell" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-coffee" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-settings-gear" _label="Settings" _variant="ghost" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Comparison: With and Without Hidden Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Disabled with Hidden Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-bell" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-coffee" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/components/button/icons.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react-v19';
-
+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';
 
@@ -16,28 +14,118 @@ export const ButtonIcons: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolButton with icons in all alignments.</p>
+				<p>
+					This story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple
+					positions at once.
+				</p>
 			</SampleDescription>
 
-			<div>
-				<KolButton
-					_icons={{
-						bottom: 'codicon codicon-arrow-down',
-						left: {
-							icon: 'codicon codicon-arrow-left',
-						},
-						top: {
-							style: {
-								'font-size': '200%',
-								transform: 'rotate(45deg)',
-							},
-							icon: 'codicon codicon-arrow-up',
-						},
-						right: 'codicon codicon-arrow-right',
-					}}
-					_label="Label"
-					_on={dummyEventHandler}
-				/>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Basic 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={{
+								top: 'codicon codicon-arrow-up',
+							}}
+							_label="Icon Top"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								bottom: 'codicon codicon-arrow-down',
+							}}
+							_label="Icon Bottom"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Multiple Icon Positions" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								left: 'codicon codicon-arrow-left',
+								right: 'codicon codicon-arrow-right',
+							}}
+							_label="Left & Right"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								top: 'codicon codicon-arrow-up',
+								bottom: 'codicon codicon-arrow-down',
+							}}
+							_label="Top & Bottom"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="All Icon Positions" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								top: {
+									style: {
+										transform: 'rotate(45deg)',
+									},
+									icon: 'codicon codicon-arrow-up',
+								},
+								bottom: 'codicon codicon-arrow-down',
+								left: {
+									icon: 'codicon codicon-arrow-left',
+								},
+								right: 'codicon codicon-arrow-right',
+							}}
+							_label="All Directions"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Simple Icon String" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="codicon codicon-home" _label="Home Icon" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-heart" _label="Heart Icon" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-trash" _label="Trash Icon" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Large Icon on Top" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								top: {
+									style: {
+										'font-size': '400%',
+									},
+									icon: 'codicon codicon-home',
+								},
+							}}
+							_label="Home"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
 			</div>
 		</>
 	);