@public-ui/sample-react 1.7.25 → 1.7.26-rc.1

package/src/components/input-checkbox/button.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputCheckboxButton: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="button" />;
+export const InputCheckboxButton: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolInputCheckbox in the variant &quot;button&quot;.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="button" />
+	</>
+);

package/src/components/input-checkbox/switch.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { InputCheckboxVariants } from './partials/variants';
 import { FormWrap } from '../FormWrap';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;
+export const InputCheckboxSwitch: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolInputCheckbox in the variant &quot;switch&quot;.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />
+	</>
+);

package/src/components/input-color/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputColorVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputColorBasic: FC = () => <FormWrap RefComponent={InputColorVariants} />;
+export const InputColorBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputColor renders a color input. The sample shows KolInputColor in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputColorVariants} />
+	</>
+);

package/src/components/input-date/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputDateVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputDateBasic: FC = () => <FormWrap RefComponent={InputDateVariants} />;
+export const InputDateBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputDate renders all types of fields for date and time input. The sample shows KolInputDate in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputDateVariants} />
+	</>
+);

package/src/components/input-email/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputEmailVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputEmailBasic: FC = () => <FormWrap RefComponent={InputEmailVariants} />;
+export const InputEmailBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputEmail renders an email input field. The sample shows KolInputEmail in a form context with all variations and states.</p>
+		</SampleDescription>{' '}
+		<FormWrap RefComponent={InputEmailVariants} />
+	</>
+);

package/src/components/input-file/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputFileVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputFileBasic: FC = () => <FormWrap RefComponent={InputFileVariants} />;
+export const InputFileBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputFile renders a file input field. The sample shows KolInputFile in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputFileVariants} />
+	</>
+);

package/src/components/input-number/basic.tsx

@@ -1,5 +1,17 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputNumberVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputNumberBasic: FC = () => <FormWrap RefComponent={InputNumberVariants} />;
+export const InputNumberBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				KolInputNumber encompasses basic functionalities, utilizing the min, max, and step attributes to restrict the range of input values. Despite these
+				constraints, it allows free input that can ignore the defined minimum and maximum values, as well as step sizes. The component intentionally does not
+				emphasize validation rules, supporting examples without form validation, and refrains from additional validation through native HTML element validation.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputNumberVariants} />
+	</>
+);

package/src/components/input-password/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputPasswordVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputPasswordBasic: FC = () => <FormWrap RefComponent={InputPasswordVariants} />;
+export const InputPasswordBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputPassword renders a password input field. The sample shows KolInputPassword in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputPasswordVariants} />
+	</>
+);

package/src/components/input-password/show-password.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
 import { KolForm, KolInputPassword } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -15,25 +16,31 @@ export const InputPasswordShowPassword: FC = () => {
 	}, [isPasswordVisible]);
 
 	return (
-		<KolForm>
-			<KolInputPassword
-				_placeholder="Mit 'Passwort anzeigen' Button"
-				_label="Passwort"
-				ref={passwordRef}
-				_smartButton={{
-					_icons: {
-						left: {
-							icon: 'codicon codicon-eye',
+		<>
+			<SampleDescription>
+				<p>This sample shows KolInputPassword with a custom smartButton, implementing a &quot;toggle password&quot; button.</p>
+			</SampleDescription>
+
+			<KolForm>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
+						},
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
 						},
-					},
-					_hideLabel: true,
-					_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-					_on: {
-						onClick: handleTogglePasswordClick,
-					},
-				}}
-				className="block"
-			/>
-		</KolForm>
+					}}
+					className="block"
+				/>
+			</KolForm>
+		</>
 	);
 };

package/src/components/input-radio/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputRadioVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputRadioBasic: FC = () => <FormWrap RefComponent={InputRadioVariants} />;
+export const InputRadioBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputRadio renders a set of radio buttons. The sample shows KolInputRadio in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputRadioVariants} />
+	</>
+);

package/src/components/input-radio/horizontal.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useState } from 'react';
 
 import { Orientation } from '@public-ui/components';
-import { KolButton, KolDetails, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
@@ -22,12 +23,11 @@ export const InputRadioHorizontal: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<KolDetails _label="Description" _open>
+			<SampleDescription>
 				<p>
-					This sample simulates the <code>horizontal</code> and <code>vertical</code> orientation of the <code>kol-input-radio</code>, if we rerender the
-					component.
+					This sample shows the <code>horizontal</code> and <code>vertical</code> orientation of KolInoutRadio. It also features a button to test re-rendering.
 				</p>
-			</KolDetails>
+			</SampleDescription>
 			<div className="flex gap-4">
 				<KolButton _label="Click me a few times" _on={{ onClick: showClick }} />
 				<KolInputCheckbox _label="Switch orientation (horizontal/vertical)" _on={{ onChange: toggleOrientation }} _variant="switch" />

package/src/components/input-radio/routes.ts

@@ -3,12 +3,9 @@ import { Routes } from '../../shares/types';
 import { InputRadioBasic } from './basic';
 import { InputRadioHorizontal } from './horizontal';
 
-import { InputRadioSelect } from './select';
-
 export const INPUT_RADIO_ROUTES: Routes = {
 	'input-radio': {
 		basic: InputRadioBasic,
 		horizontal: InputRadioHorizontal,
-		select: InputRadioSelect,
 	},
 };

package/src/components/input-range/basic.tsx

@@ -1,5 +1,16 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputRangeVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputRangeBasic: FC = () => <FormWrap RefComponent={InputRangeVariants} />;
+export const InputRangeBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				KolInputRange renders a pair of range- and number fields wich are synchronized with each other. The sample shows KolInputRange in a form context with
+				all variations and states.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputRangeVariants} />
+	</>
+);

package/src/components/input-text/basic.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputTextVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputTextBasic: FC = () => <FormWrap RefComponent={InputTextVariants} />;
+export const InputTextBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputTextVariants} />
+	</>
+);

package/src/components/input-text/focus.tsx

@@ -2,6 +2,7 @@ import React, { useLayoutEffect, useRef } from 'react';
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputTextFocus: FC = () => {
 	const ref = useRef<HTMLKolInputTextElement | null>(null);
@@ -13,14 +14,19 @@ export const InputTextFocus: FC = () => {
 	}, [ref]);
 
 	return (
-		<KolForm>
-			<div className="grid gap-4">
-				<KolInputText ref={ref} _label="Vorname" />
-				<KolInputText _label="Nachname" />
-				<div>
-					<KolButton _label="Submit"></KolButton>
+		<>
+			<SampleDescription>
+				<p>This sample shows a KolInputText component that automatically receives focus.</p>
+			</SampleDescription>
+			<KolForm>
+				<div className="grid gap-4">
+					<KolInputText ref={ref} _label="Vorname" />
+					<KolInputText _label="Nachname" />
+					<div>
+						<KolButton _label="Submit"></KolButton>
+					</div>
 				</div>
-			</div>
-		</KolForm>
+			</KolForm>
+		</>
 	);
 };

package/src/components/input-text/hide-errors.tsx

@@ -6,7 +6,10 @@ import { SampleDescription } from '../SampleDescription';
 export const InputTextHideErrors: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
-			This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
+			<p>
+				This sample shows the <code>_hideError</code> feature for KolInputText. It allows to hide the error message from an input field and can be used, when
+				the error is already shown somewhere else, e.g. for a group of inputs.
+			</p>
 		</SampleDescription>
 		<KolCard _label="Normal input field with error" _level={0}>
 			<KolInputText _error="Error message" _label="Input with error" _touched />

package/src/components/input-text/routes.ts

@@ -1,14 +1,12 @@
 import { Routes } from '../../shares/types';
 
 import { InputTextBasic } from './basic';
-import { InputTextBlur } from './blur';
 import { InputTextHideErrors } from './hide-errors';
 import { InputTextFocus } from './focus';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		blur: InputTextBlur,
 		focus: InputTextFocus,
 		'hide-errors': InputTextHideErrors,
 	},

package/src/components/kolibri/basic.tsx

@@ -1,8 +1,13 @@
 import React, { FC } from 'react';
 import { KolHeading, KolKolibri } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const KolibriBasic: FC = () => (
 	<>
+		<SampleDescription>
+			<p>KolKolibri renders the KoliBri logo. The sample show the logo with and without label and with a custom color.</p>
+		</SampleDescription>
+
 		<KolHeading class="block" _level={3} _label="Regular" />
 		<KolKolibri class="block" style={{ width: 300 }} />
 		<KolHeading class="block" _level={3} _label="Ohne Label" />

package/src/components/link/basic.tsx

@@ -2,23 +2,31 @@ import React from 'react';
 import { KolLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _href="#/back-page" _label="Simple Link" />
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
-			als <strong>inline-Element</strong> ausgegeben.
-		</p>
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-			<KolLink class="d-inline-block" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere
-			Eigenschaften zuweisen.
-			<br />
-			<br />
-			Danach folgt ein Link, der als block-Element ausgegeben wird.
-			<KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen
-			Zeilenumbruch.
-		</p>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				KolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="Simple Link" />
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
+				als <strong>inline-Element</strong> ausgegeben.
+			</p>
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
+				<KolLink class="d-inline-block" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere
+				Eigenschaften zuweisen.
+				<br />
+				<br />
+				Danach folgt ein Link, der als block-Element ausgegeben wird.
+				<KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen
+				Zeilenumbruch.
+			</p>
+		</div>
+	</>
 );

package/src/components/link/icons.tsx

@@ -2,40 +2,46 @@ import React from 'react';
 import { KolLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkIcons: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
-		<KolLink
-			_icons={{
-				right: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon rechts"
-			_href="#/back-page"
-		/>
-		<KolLink
-			_icons={{
-				top: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon oben"
-			_href="#/back-page"
-		/>
-		<KolLink
-			_icons={{
-				bottom: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon unten"
-			_href="#/back-page"
-		/>
-		<KolLink
-			_icons={{
-				top: 'codicon codicon-home',
-				right: 'codicon codicon-home',
-				bottom: 'codicon codicon-home',
-				left: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit allen Icons"
-			_href="#/back-page"
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolLink with icons in different alignments and combinations.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
+			<KolLink
+				_icons={{
+					right: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon rechts"
+				_href="#/back-page"
+			/>
+			<KolLink
+				_icons={{
+					top: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon oben"
+				_href="#/back-page"
+			/>
+			<KolLink
+				_icons={{
+					bottom: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon unten"
+				_href="#/back-page"
+			/>
+			<KolLink
+				_icons={{
+					top: 'codicon codicon-home',
+					right: 'codicon codicon-home',
+					bottom: 'codicon codicon-home',
+					left: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit allen Icons"
+				_href="#/back-page"
+			/>
+		</div>
+	</>
 );

package/src/components/link/image.tsx

@@ -2,18 +2,24 @@ import React from 'react';
 import { KolKolibri, KolLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkImage: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
-		<br />
-		<KolLink _href="#/back-page" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
-			<KolKolibri style={{ width: '300px' }}></KolKolibri>
-		</KolLink>
-		<br />
-		<KolLink _href="#/back-page" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
-		</KolLink>
-	</div>
+	<>
+		<SampleDescription>
+			<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
+			<br />
+			<KolLink _href="#/back-page" _label="">
+				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+				<KolKolibri style={{ width: '300px' }}></KolKolibri>
+			</KolLink>
+			<br />
+			<KolLink _href="#/back-page" _label="">
+				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+			</KolLink>
+		</div>
+	</>
 );

package/src/components/link/target.tsx

@@ -2,14 +2,22 @@ import React from 'react';
 import { KolLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkTarget: FC = () => (
-	<div className="d-flex gap-4">
-		<KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
-		<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-		<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
-		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
-		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolLink with different <code>_target</code>-properties.
+			</p>
+		</SampleDescription>
+		<div className="d-flex gap-4">
+			<KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
+			<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+			<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
+			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
+			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+		</div>
+	</>
 );

package/src/components/link-button/basic.tsx

@@ -2,19 +2,25 @@ import React from 'react';
 import { KolLinkButton } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const ARGS = {
 	_href: '#/back-page',
 };
 
 export const LinkButtonBasic: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
-			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+	<>
+		<SampleDescription>
+			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
+		</SampleDescription>
+		<div className="grid gap-14">
+			<div className="flex flex-warp gap-14">
+				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			</div>
 		</div>
-	</div>
+	</>
 );

package/src/components/link-group/basic.tsx

@@ -1,9 +1,20 @@
 import React, { FC } from 'react';
-import { KolLinkGroup } from '@public-ui/react';
+import { KolBadge, KolLinkGroup } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const links = [
 	{ _label: 'Link 1', _href: '#/back-page' },
 	{ _label: 'Link 2', _href: '#/back-page' },
 	{ _label: 'Link 3', _href: '#/back-page' },
 ];
-export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} />;
+export const LinkGroupBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolLinkGroup renders a list of the given links.</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
+		</SampleDescription>
+		<KolLinkGroup _links={links} />
+	</>
+);