diff --git a/panel/lab/components/fieldpreviews/tag/index.php b/panel/lab/components/fieldpreviews/tag/index.php
new file mode 100644
index 0000000000..44c52a38d7
--- /dev/null
+++ b/panel/lab/components/fieldpreviews/tag/index.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-tag-field-preview',
+];
diff --git a/panel/lab/components/fieldpreviews/tag/index.vue b/panel/lab/components/fieldpreviews/tag/index.vue
new file mode 100644
index 0000000000..c68ab6b4d5
--- /dev/null
+++ b/panel/lab/components/fieldpreviews/tag/index.vue
@@ -0,0 +1,29 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-tag-field-preview value="A" />
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
+
+		<k-lab-example label="Overlow">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-tag-field-preview
+					value="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
+				/>
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
+
+		<k-lab-example label="Empty">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-tag-field-preview />
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
+	</k-lab-examples>
+</template>
diff --git a/panel/lab/components/fieldpreviews/users/index.vue b/panel/lab/components/fieldpreviews/users/index.vue
index 03dfa06a4c..992f059bc9 100644
--- a/panel/lab/components/fieldpreviews/users/index.vue
+++ b/panel/lab/components/fieldpreviews/users/index.vue
@@ -7,12 +7,12 @@
 					:value="[
 						{
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: 'marge@getkirby.com',
+							email: 'marge@getkirby.com',
 							link: '/'
 						},
 						{
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: 'maggie@getkirby.com',
+							email: 'maggie@getkirby.com',
 							link: '/'
 						}
 					]"
@@ -28,7 +28,7 @@
 					:value="
 						Array(20).fill({
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: 'marge@getkirby.com',
+							email: 'marge@getkirby.com',
 							link: '/'
 						})
 					"
diff --git a/panel/lab/components/tags/1_tag/index.vue b/panel/lab/components/tags/1_tag/index.vue
index c824c32b60..9634af6863 100644
--- a/panel/lab/components/tags/1_tag/index.vue
+++ b/panel/lab/components/tags/1_tag/index.vue
@@ -7,7 +7,7 @@
 				{ value: 'light', text: 'Light', icon: 'sun' }
 			]"
 			:value="theme"
-			@input="theme = $event"
+			@input="(theme = $event)"
 		/>
 
 		<k-lab-example label="Slot">
@@ -66,6 +66,34 @@
 				text="Foo"
 			/>
 		</k-lab-example>
+		<k-lab-example :flex="true" label="Image & Link">
+			<k-tag
+				link="https://getkirby.com"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:theme="theme"
+			/>
+			<k-tag
+				link="https://getkirby.com"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:theme="theme"
+				text="Foo"
+			/>
+			<k-tag
+				link="https://getkirby.com"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:removable="true"
+				:theme="theme"
+				text="Foo"
+			/>
+			<k-tag
+				link="https://getkirby.com"
+				:disabled="true"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:removable="true"
+				:theme="theme"
+				text="Foo"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
 
diff --git a/panel/src/components/Forms/Field/LinkField.vue b/panel/src/components/Forms/Field/LinkField.vue
index 2a6e196601..95f3540226 100644
--- a/panel/src/components/Forms/Field/LinkField.vue
+++ b/panel/src/components/Forms/Field/LinkField.vue
@@ -334,7 +334,7 @@ export default {
 	container-type: inline-size;
 	overflow: auto;
 }
-.k-link-field .k-bubbles-field-preview {
+.k-link-field .k-tags-field-preview {
 	--tag-rounded: var(--rounded-sm);
 	--tag-size: var(--height-sm);
 	padding-inline: 0;
diff --git a/panel/src/components/Forms/Previews/TagFieldPreview.vue b/panel/src/components/Forms/Previews/TagFieldPreview.vue
new file mode 100644
index 0000000000..1ce439b26d
--- /dev/null
+++ b/panel/src/components/Forms/Previews/TagFieldPreview.vue
@@ -0,0 +1,34 @@
+<template>
+	<ul
+		:class="[
+			'k-tag-field-preview',
+			'k-tags-field-preview',
+			'k-tags',
+			$options.class,
+			$attrs.class
+		]"
+		:style="$attrs.style"
+	>
+		<li>
+			<k-tag :html="html" :text="value" theme="light" @click.native.stop />
+		</li>
+	</ul>
+</template>
+
+<script>
+import FieldPreview from "@/mixins/forms/fieldPreview.js";
+
+export default {
+	mixins: [FieldPreview],
+	props: {
+		/**
+		 * If set to `true`, the `text` is rendered as HTML code,
+		 * otherwise as plain text
+		 */
+		html: {
+			type: Boolean
+		},
+		value: String
+	}
+};
+</script>
diff --git a/panel/src/components/Forms/Previews/TagsFieldPreview.vue b/panel/src/components/Forms/Previews/TagsFieldPreview.vue
index c0e166609e..458cd8a6bd 100644
--- a/panel/src/components/Forms/Previews/TagsFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/TagsFieldPreview.vue
@@ -1,26 +1,37 @@
 <template>
-	<div
-		:class="['k-tags-field-preview', $options.class, $attrs.class]"
+	<ul
+		:class="['k-tags-field-preview', 'k-tags', $options.class, $attrs.class]"
 		:style="$attrs.style"
 	>
-		<k-tags
-			:draggable="false"
-			:html="html"
-			:value="tags"
-			element="ul"
-			element-tag="li"
-			theme="light"
-		/>
-	</div>
+		<li
+			v-for="(tag, tagIndex) in tags"
+			:key="tag.id ?? tag.value ?? tag.text ?? tagIndex"
+		>
+			<k-tag
+				:html="html"
+				:image="tag.image"
+				:link="tag.link"
+				:text="tag.text"
+				theme="light"
+				@click.native.stop
+			/>
+		</li>
+	</ul>
 </template>
 
 <script>
 import FieldPreview from "@/mixins/forms/fieldPreview.js";
-import { props as TagsProps } from "@/components/Navigation/Tags.vue";
 
 export default {
-	mixins: [FieldPreview, TagsProps],
+	mixins: [FieldPreview],
 	props: {
+		/**
+		 * If set to `true`, the `text` is rendered as HTML code,
+		 * otherwise as plain text
+		 */
+		html: {
+			type: Boolean
+		},
 		value: {
 			default: () => [],
 			type: [Array, String]
diff --git a/panel/src/components/Forms/Previews/UsersFieldPreview.vue b/panel/src/components/Forms/Previews/UsersFieldPreview.vue
index b9af66e2f2..8996302599 100644
--- a/panel/src/components/Forms/Previews/UsersFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/UsersFieldPreview.vue
@@ -5,10 +5,10 @@ export default {
 	extends: TagsFieldPreview,
 	class: "k-users-field-preview",
 	computed: {
-		bubble() {
+		tags() {
 			return this.value.map((user) => {
 				return {
-					text: user.username,
+					text: user.username ?? user.email,
 					link: user.link,
 					image: user.image
 				};
diff --git a/panel/src/components/Forms/Previews/index.js b/panel/src/components/Forms/Previews/index.js
index 09a1801232..7aec6a293e 100644
--- a/panel/src/components/Forms/Previews/index.js
+++ b/panel/src/components/Forms/Previews/index.js
@@ -10,6 +10,7 @@ import ImageFieldPreview from "./ImageFieldPreview.vue";
 import LinkFieldPreview from "./LinkFieldPreview.vue";
 import ObjectFieldPreview from "./ObjectFieldPreview.vue";
 import PagesFieldPreview from "./PagesFieldPreview.vue";
+import TagFieldPreview from "./TagFieldPreview.vue";
 import TagsFieldPreview from "./TagsFieldPreview.vue";
 import TextFieldPreview from "./TextFieldPreview.vue";
 import TimeFieldPreview from "./TimeFieldPreview.vue";
@@ -31,6 +32,7 @@ export default {
 		app.component("k-link-field-preview", LinkFieldPreview);
 		app.component("k-object-field-preview", ObjectFieldPreview);
 		app.component("k-pages-field-preview", PagesFieldPreview);
+		app.component("k-tag-field-preview", TagFieldPreview);
 		app.component("k-tags-field-preview", TagsFieldPreview);
 		app.component("k-text-field-preview", TextFieldPreview);
 		app.component("k-toggle-field-preview", ToggleFieldPreview);
@@ -42,10 +44,10 @@ export default {
 		app.component("k-list-field-preview", HtmlFieldPreview);
 		app.component("k-writer-field-preview", HtmlFieldPreview);
 
-		app.component("k-checkboxes-field-preview", BubblesFieldPreview);
-		app.component("k-multiselect-field-preview", BubblesFieldPreview);
-		app.component("k-radio-field-preview", BubblesFieldPreview);
-		app.component("k-select-field-preview", BubblesFieldPreview);
-		app.component("k-toggles-field-preview", BubblesFieldPreview);
+		app.component("k-checkboxes-field-preview", TagsFieldPreview);
+		app.component("k-multiselect-field-preview", TagsFieldPreview);
+		app.component("k-radio-field-preview", TagFieldPreview);
+		app.component("k-select-field-preview", TagFieldPreview);
+		app.component("k-toggles-field-preview", TagsFieldPreview);
 	}
 };
diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
index 6781f52d73..edf2675674 100644
--- a/panel/src/components/Navigation/Tag.vue
+++ b/panel/src/components/Navigation/Tag.vue
@@ -1,8 +1,9 @@
 <template>
 	<component
-		:is="element"
+		:is="element ?? (link ? 'k-link' : 'button')"
 		:aria-disabled="disabled"
 		:data-theme="theme"
+		:to="link"
 		class="k-tag"
 		type="button"
 		@keydown.delete.prevent="remove"
@@ -74,16 +75,17 @@ export default {
 		/**
 		 * HTML element to use
 		 */
-		element: {
-			type: String,
-			default: "button"
-		},
+		element: String,
 		/**
 		 * See `k-image-frame` or `k-icon-frame` for available options
 		 */
 		image: {
 			type: Object
 		},
+		/**
+		 * Sets a link on the tag. Link can be absolute or relative.
+		 */
+		link: String,
 		/**
 		 * Text to display in the bubble
 		 */
diff --git a/panel/src/components/Navigation/Tags.vue b/panel/src/components/Navigation/Tags.vue
index 8ae53d9001..79bcc094da 100644
--- a/panel/src/components/Navigation/Tags.vue
+++ b/panel/src/components/Navigation/Tags.vue
@@ -17,9 +17,10 @@
 				v-for="(item, itemIndex) in tags"
 				:key="item.id ?? item.value ?? item.text"
 				:disabled="disabled"
-				:element="elementTag"
+				:element="element"
 				:html="html"
 				:image="item.image"
+				:link="item.link"
 				:removable="removable && !disabled"
 				:theme="theme"
 				name="tag"
@@ -48,16 +49,12 @@ export const props = {
 	inheritAttrs: false,
 	props: {
 		/**
-		 * HTML element to use for the tags list
+		 * HTML element to use for each tag
 		 */
 		element: {
 			type: String,
 			default: "div"
 		},
-		/**
-		 * HTML element to use for each tag
-		 */
-		elementTag: String,
 		/**
 		 * You can set the layout to `"list"` to extend the width of each tag
 		 * to 100% and show them in a list. This is handy in narrow columns
@@ -238,7 +235,7 @@ export default {
 				// can't be matched with any defined option
 				// to avoid XSS when displaying via `v-html`
 				text: this.$helper.string.escapeHTML(tag.text ?? tag.value),
-				value: tag.value
+				...tag
 			};
 		}
 	}
diff --git a/src/Panel/Ui/Button.php b/src/Panel/Ui/Button.php
index 563fc52078..59aed69e95 100644
--- a/src/Panel/Ui/Button.php
+++ b/src/Panel/Ui/Button.php
@@ -35,7 +35,9 @@ public function __construct(
 		public string|array|null $title = null,
 		public string $type = 'button',
 		public string|null $variant = null,
+		...$attrs
 	) {
+		$this->attrs = $attrs;
 	}
 
 	public function props(): array
diff --git a/src/Panel/Ui/Buttons/ViewButton.php b/src/Panel/Ui/Buttons/ViewButton.php
index 5c73b37265..1ab1a55e7a 100644
--- a/src/Panel/Ui/Buttons/ViewButton.php
+++ b/src/Panel/Ui/Buttons/ViewButton.php
@@ -46,7 +46,9 @@ public function __construct(
 		public string|array|null $title = null,
 		public string $type = 'button',
 		public string|null $variant = 'filled',
+		...$attrs
 	) {
+		$this->attrs = $attrs;
 	}
 
 	/**
@@ -55,19 +57,31 @@ public function __construct(
 	 * and resolving to proper instance
 	 */
 	public static function factory(
-		string|array|Closure $button,
+		string|array|Closure|true $button = true,
 		string|int|null $name = null,
 		string|null $view = null,
 		ModelWithContent|Language|null $model = null,
 		array $data = []
 	): static|null {
-		// referenced by name
-		if (is_string($button) === true) {
-			$button = static::find($button, $view);
+		// transform `- name` notation to `name: true`
+		if (
+			is_string($name) === false &&
+			is_string($button) === true
+		) {
+			$name   = $button;
+			$button = true;
+		}
+
+		// if referenced by name (`name: true`),
+		// try to get button definition from areas or config
+		if ($button === true) {
+			$button = static::find($name, $view);
 		}
 
-		// turn closure into actual button (object or array)
-		$button = static::resolve($button, $model, $data);
+		// resolve Closure to button object or array
+		if ($button instanceof Closure) {
+			$button = static::resolve($button, $model, $data);
+		}
 
 		if (
 			$button === null ||
@@ -76,12 +90,12 @@ public static function factory(
 			return $button;
 		}
 
-		// flatten definition array into list of arguments for this class
+		// flatten array into list of arguments for this class
 		$button = static::normalize($button);
 
 		// if button definition has a name, use it for the component name
 		if (is_string($name) === true) {
-			// If this specific component does not exist,
+			// if this specific component does not exist,
 			// `k-view-buttons` will fall back to `k-view-button` again
 			$button['component'] ??= 'k-' . $name . '-view-button';
 		}
@@ -165,33 +179,29 @@ public function props(): array
 	 * @internal
 	 */
 	public static function resolve(
-		Closure|array $button,
+		Closure $button,
 		ModelWithContent|Language|null $model = null,
 		array $data = []
 	): static|array|null {
-		if ($button instanceof Closure) {
-			$kirby      = App::instance();
-			$controller = new Controller($button);
-
-			if (
-				$model instanceof ModelWithContent ||
-				$model instanceof Language
-			) {
-				$data = [
-					'model'             => $model,
-					$model::CLASS_ALIAS => $model,
-					...$data
-				];
-			}
-
-			$button = $controller->call(data: [
-				'kirby' => $kirby,
-				'site'  => $kirby->site(),
-				'user'  => $kirby->user(),
+		$kirby      = App::instance();
+		$controller = new Controller($button);
+
+		if (
+			$model instanceof ModelWithContent ||
+			$model instanceof Language
+		) {
+			$data = [
+				'model'             => $model,
+				$model::CLASS_ALIAS => $model,
 				...$data
-			]);
+			];
 		}
 
-		return $button;
+		return $controller->call(data: [
+			'kirby' => $kirby,
+			'site'  => $kirby->site(),
+			'user'  => $kirby->user(),
+			...$data
+		]);
 	}
 }
diff --git a/src/Panel/Ui/Component.php b/src/Panel/Ui/Component.php
index 9cb23748e7..448f14269b 100644
--- a/src/Panel/Ui/Component.php
+++ b/src/Panel/Ui/Component.php
@@ -20,12 +20,15 @@
 abstract class Component
 {
 	protected string $key;
+	public array $attrs = [];
 
 	public function __construct(
 		public string $component,
 		public string|null $class = null,
-		public string|null $style = null
+		public string|null $style = null,
+		...$attrs
 	) {
+		$this->attrs = $attrs;
 	}
 
 	/**
@@ -70,6 +73,7 @@ public function props(): array
 		return [
 			'class' => $this->class,
 			'style' => $this->style,
+			...$this->attrs
 		];
 	}
 
diff --git a/tests/Panel/Ui/ButtonTest.php b/tests/Panel/Ui/ButtonTest.php
index 73d7300a7e..8185bbf408 100644
--- a/tests/Panel/Ui/ButtonTest.php
+++ b/tests/Panel/Ui/ButtonTest.php
@@ -10,6 +10,24 @@
  */
 class ButtonTest extends TestCase
 {
+	/**
+	 * @covers ::__construct
+	 */
+	public function testAttrs()
+	{
+		$button = new Button(
+			text: 'Attrs',
+			foo: 'bar'
+		);
+
+		$this->assertSame([
+			'foo'        => 'bar',
+			'responsive' => true,
+			'text'       => 'Attrs',
+			'type'       => 'button',
+		], array_filter($button->props()));
+	}
+
 	/**
 	 * @covers ::props
 	 */
diff --git a/tests/Panel/Ui/Buttons/ViewButtonTest.php b/tests/Panel/Ui/Buttons/ViewButtonTest.php
index 543538c108..8f00525b8b 100644
--- a/tests/Panel/Ui/Buttons/ViewButtonTest.php
+++ b/tests/Panel/Ui/Buttons/ViewButtonTest.php
@@ -19,6 +19,26 @@ public function setUp(): void
 		$this->login();
 	}
 
+	/**
+	 * @covers ::__construct
+	 */
+	public function testAttrs()
+	{
+		$button = new ViewButton(
+			text: 'Attrs',
+			foo: 'bar'
+		);
+
+		$this->assertSame([
+			'foo'        => 'bar',
+			'responsive' => true,
+			'size'       => 'sm',
+			'text'       => 'Attrs',
+			'type'       => 'button',
+			'variant'    => 'filled'
+		], array_filter($button->props()));
+	}
+
 	/**
 	 * @covers ::factory
 	 */
@@ -69,7 +89,11 @@ public function testFactoryFromStringName()
 		// simulate a logged in user
 		$app->impersonate('test@getkirby.com');
 
-		$button = ViewButton::factory('test');
+		$button = ViewButton::factory(name: 'test');
+		$this->assertInstanceOf(ViewButton::class, $button);
+		$this->assertSame('result', $button->component);
+
+		$button = ViewButton::factory(button: 'test');
 		$this->assertInstanceOf(ViewButton::class, $button);
 		$this->assertSame('result', $button->component);
 
@@ -227,8 +251,5 @@ public function testResolve(): void
 		);
 
 		$this->assertSame('k-test-view-button', $result['component']);
-
-		$result = ViewButton::resolve(['component' => 'k-test-view-button']);
-		$this->assertSame('k-test-view-button', $result['component']);
 	}
 }
diff --git a/tests/Panel/Ui/ComponentTest.php b/tests/Panel/Ui/ComponentTest.php
index 3e262d375c..b1b06bda7e 100644
--- a/tests/Panel/Ui/ComponentTest.php
+++ b/tests/Panel/Ui/ComponentTest.php
@@ -15,6 +15,26 @@ class UiComponent extends Component
  */
 class ComponentTest extends TestCase
 {
+	/**
+	 * @covers ::__construct
+	 */
+	public function testAttrs()
+	{
+		$props = [
+			'component' => 'k-text',
+			'class'     => 'k-test',
+			'foo'       => 'bar'
+		];
+
+		$component = new UiComponent(...$props);
+
+		$this->assertSame([
+			'class' => 'k-test',
+			'style' => null,
+			'foo'   => 'bar',
+		], $component->props());
+	}
+
 	/**
 	 * @covers ::__call
 	 */