public-ui · Copilot · Apr 10, 2026
diff --git a/docs/30-components/popover-button.mdx b/docs/30-components/popover-button.mdx
@@ -1,13 +1,11 @@
 ---
 title: PopoverButton
 description: Beschreibung und Spezifikation für die PopoverButton-Komponente.
-tags:
-  - Dropdown
-  - ContextMenu
 ---
 
 import { ExampleLink } from '@site/src/components/ExampleLink';
 import Readme from '../../readmes/popover-button/readme.md';
+import PopoverButtonPreview from '@site/src/components/previews/components/PopoverButton';
 
 # PopoverButton
 
@@ -21,28 +19,17 @@ Der PopoverButton eignet sich besonders für:
 
 ## Konstruktion
 
-### Code
+<PopoverButtonPreview
+	visibleProperties={['_label', '_popoverAlign', '_icons', '_slot', '_disabled', '_hideLabel']}
+	codeCollapsable
+	codeCollapsed
+/>
 
-```html
-<kol-popover-button _label="Weitere Informationen" _icons="fa-solid fa-circle-info" _popover-align="right">
-	Weitere Informationen im Popover.
-</kol-popover-button>
-```
-
-### Beispiel
-
-<kol-popover-button _label="Weitere Informationen" _icons="fa-solid fa-circle-info" _popover-align="right">
-	Weitere Informationen im Popover.
-</kol-popover-button>
+# API
 
 <Readme />
 
-<ExampleLink component="popover-button" />
-
-## Live-Editor
-
-[//]: # (<LiveEditorCompact component="popover-button" />)
-
 ## Beispiele
 
-[//]: # (<Configurator component="popover-button" sample="basic" />)
+<ExampleLink component="popover-button" />
+
diff --git a/i18n/de/code.json b/i18n/de/code.json
@@ -519,6 +519,12 @@
 	"preview.component.image.label": {
 		"message": "Beispielbild"
 	},
+	"preview.component.popover-button.label": {
+		"message": "Passwort-Hilfe"
+	},
+	"preview.component.popover-button.slot": {
+		"message": "<strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul>"
+	},
 	"preview.property.remove": {
 		"message": "Entfernen"
 	},

diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -519,6 +519,12 @@
 	"preview.component.image.label": {
 		"message": "Sample image"
 	},
+	"preview.component.popover-button.label": {
+		"message": "Password help"
+	},
+	"preview.component.popover-button.slot": {
+		"message": "<strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul>"
+	},
 	"preview.property.remove": {
 		"message": "Remove"
 	},

diff --git a/i18n/en/docusaurus-plugin-content-docs/current/30-components/popover-button.mdx b/i18n/en/docusaurus-plugin-content-docs/current/30-components/popover-button.mdx
@@ -5,6 +5,7 @@ description: Description and specification for the PopoverButton component.
 
 import { ExampleLink } from '@site/src/components/ExampleLink';
 import Readme from '/readmes/popover-button/readme.md';
+import PopoverButtonPreview from '@site/src/components/previews/components/PopoverButton';
 
 # PopoverButton
 
@@ -18,28 +19,17 @@ The PopoverButton is particularly suitable for:
 
 ## Construction
 
-### Code
+<PopoverButtonPreview
+	visibleProperties={['_label', '_popoverAlign', '_icons', '_slot', '_disabled', '_hideLabel']}
+	codeCollapsable
+	codeCollapsed
+/>
 
-```html
-<kol-popover-button _label="Weitere Informationen" _icons="fa-solid fa-circle-info" _popover-align="right">
-	Weitere Informationen im Popover.
-</kol-popover-button>
-```
-
-### Example
-
-<kol-popover-button _label="Weitere Informationen" _icons="fa-solid fa-circle-info" _popover-align="right">
-Further information in the popover.
-</kol-popover-button>
+# API
 
 <Readme />
 
-<ExampleLink component="popover-button" />
-
-## Live editor
-
-[//]: # (<LiveEditorCompact component="popover-button" />)
-
 ## Examples
 
-[//]: # (<Configurator component="popover-button" sample="basic" />)
+<ExampleLink component="popover-button" />
+
diff --git a/src/components/previews/components/PopoverButton.tsx b/src/components/previews/components/PopoverButton.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import Preview, { PreviewLayout } from '../Preview';
+import { AlignProperty, BooleanProperty, ButtonVariantProperty, IconsProperty, MultiLineTextProperty } from '../properties';
+import type { JSX } from '@public-ui/components';
+import { KolInputText, KolPopoverButton } from '@public-ui/react-v19';
+import { translate } from '@docusaurus/Translate';
+import { sanitizeHtml } from '../../../shares/sanitize';
+
+type PopoverButtonPreviewProps = JSX.KolPopoverButton & { _slot?: string };
+
+interface PopoverButtonPreviewComponentProps {
+	initialProps?: PopoverButtonPreviewProps;
+	visibleProperties?: (keyof JSX.KolPopoverButton | '_slot')[];
+	codeCollapsable?: boolean;
+	codeCollapsed?: boolean;
+}
+
+const PopoverButtonPreview: React.FC<PopoverButtonPreviewComponentProps> = (props) => {
+	const defaultProps = React.useMemo<PopoverButtonPreviewProps>(
+		() => ({
+			_label: translate({ id: 'preview.component.popover-button.label' }),
+			_slot: translate({ id: 'preview.component.popover-button.slot' }),
+		}),
+		[],
+	);
+
+	return (
+		<Preview<PopoverButtonPreviewProps>
+			propertyComponents={{
+				_label: <KolInputText _label="Label" />,
+				_popoverAlign: <AlignProperty label="Popover Align" defaultValue="bottom" />,
+				_variant: <ButtonVariantProperty label="Variant" defaultValue="normal" />,
+				_icons: <IconsProperty label="Icons" />,
+				_slot: <MultiLineTextProperty label="Content" />,
+				_disabled: <BooleanProperty label="Disabled" />,
+				_hideLabel: <BooleanProperty label="Hide Label" />,
+			}}
+			initialProps={{ ...defaultProps, ...props.initialProps }}
+			componentName="KolPopoverButton"
+			visibleProperties={props.visibleProperties}
+			codeCollapsable={props.codeCollapsable}
+			codeCollapsed={props.codeCollapsed}
+			layout={PreviewLayout.CENTERED}
+			slotKey="_slot"
+		>
+			{(componentProps) => {
+				const { _slot, ...popoverButtonProps } = componentProps;
+				const sanitizedHtml = sanitizeHtml(_slot ?? '');
+				return (
+					<div className="min-h-44">
+						<KolPopoverButton {...popoverButtonProps}>
+							<div style={{ border: '1px solid #d1d5db', borderRadius: '8px', background: '#fff', padding: '16px', boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }} dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
+						</KolPopoverButton>
+					</div>
+				);
+			}}
+		</Preview>
+	);
+};
+
+export default PopoverButtonPreview;