diff --git a/web/src/lib/components/notifications/NotificationToolbar.svelte b/web/src/lib/components/notifications/NotificationToolbar.svelte
index 56f6b92bb..5c02414df 100644
--- a/web/src/lib/components/notifications/NotificationToolbar.svelte
+++ b/web/src/lib/components/notifications/NotificationToolbar.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import type { Component } from "svelte";
-	import type { SvelteHTMLElements } from "svelte/elements";
 	import CheckCheck from "$icon/check-check";
 	import Cog from "$icon/cog";
 	import Glasses from "$icon/glasses";
 	import Inbox from "$icon/inbox";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import type { CategoryFilter, ReadFilter } from "$lib/components/notifications/types";
 
 	interface Props {
@@ -39,27 +38,20 @@
 	const categories: CategoryFilter[] = ["all", "work", "social"];
 </script>
 
-{#snippet readSegment(
-	filter: ReadFilter,
-	label: string,
-	icon: Component<SvelteHTMLElements["svg"]>
-)}
-	<Button
-		{...segmentProps(readFilter === filter)}
-		{icon}
-		href={onReadFilter ? undefined : pageHref(filter, categoryFilter)}
-		onclick={onReadFilter ? () => onReadFilter(filter) : undefined}
-	>
-		{label}
-	</Button>
-{/snippet}
-
 <div class="flex flex-wrap items-center justify-between gap-xs">
 	<div class="flex flex-wrap items-center gap-xs">
-		<ButtonGroup segmented>
-			{@render readSegment("inbox", "Inbox", Inbox)}
-			{@render readSegment("unread", "Unread", Glasses)}
-		</ButtonGroup>
+		<SegmentedControl
+			value={readFilter}
+			href={onReadFilter ? undefined : (filter) => pageHref(filter, categoryFilter)}
+			label="Read state"
+		>
+			<Segment value="inbox" icon={Inbox} onclick={() => onReadFilter?.("inbox")}
+				>Inbox</Segment
+			>
+			<Segment value="unread" icon={Glasses} onclick={() => onReadFilter?.("unread")}
+				>Unread</Segment
+			>
+		</SegmentedControl>
 
 		{#if hasNotifications}
 			<Button
@@ -74,18 +66,17 @@
 	</div>
 
 	{#if onCategoryFilter}
-		<ButtonGroup segmented>
+		<SegmentedControl value={categoryFilter} label="Category">
 			{#each categories as category (category)}
-				{@const segment = segmentProps(categoryFilter === category)}
-				<Button
-					{...segment}
-					class={[segment.class, "capitalize"].filter(Boolean).join(" ")}
+				<Segment
+					value={category}
+					class="capitalize"
 					onclick={() => onCategoryFilter(category)}
 				>
 					{category}
-				</Button>
+				</Segment>
 			{/each}
-		</ButtonGroup>
+		</SegmentedControl>
 	{/if}
 
 	{#if preferences}
diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index c04980691..480aa1f39 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -7,7 +7,9 @@
 	import type { ResolvedPathname } from "$app/types";
 	import { hasRenderedView, hasTextView, type BlobKind, type BlobViewMode } from "$lib/api/blob";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import CopyButton from "$lib/components/ui/CopyButton.svelte";
@@ -156,24 +158,20 @@
 							</Toggle>
 						{/if}
 						{#if hasRenderedView(kind)}
-							<ButtonGroup segmented>
-								<Button
+							<SegmentedControl bind:value={view} label="View">
+								<Segment
+									value="code"
 									size="small"
 									icon={CodeXml}
-									aria-pressed={view === "code"}
-									{...segmentProps(view === "code")}
-									onclick={() => (view = "code")}
 									title="View source"
 								/>
-								<Button
+								<Segment
+									value="rendered"
 									size="small"
 									icon={Eye}
-									aria-pressed={view === "rendered"}
-									{...segmentProps(view === "rendered")}
-									onclick={() => (view = "rendered")}
 									title="View rendered"
 								/>
-							</ButtonGroup>
+							</SegmentedControl>
 						{/if}
 					</div>
 				{/if}
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index 2f65fc0ff..5e8754b61 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -13,7 +13,8 @@
 	import UnfoldVertical from "$icon/unfold-vertical";
 	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
 	import Modal from "$lib/components/ui/Modal.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
@@ -151,26 +152,28 @@
 {/snippet}
 
 {#snippet styleSwitch(size: "small" | "regular", narrow: string)}
-	<ButtonGroup segmented>
+	<SegmentedControl
+		value={diffStyle}
+		href={styleHref ? (style) => styleHref(style) as "/" : undefined}
+		label="Diff style"
+	>
 		{#each ["unified", "split"] as const as style (style)}
-			{@const segment = segmentProps(diffStyle === style)}
-			<Button
+			<Segment
+				value={style}
 				icon={style === "split" ? SquareSplitHorizontal : SquareSplitVertical}
 				title="{style === 'split' ? 'Split' : 'Unified'} diff"
-				href={styleHref ? (styleHref(style) as "/") : undefined}
 				data-sveltekit-replacestate
 				data-sveltekit-noscroll
 				onclick={styleHref ? undefined : () => (localStyle = style)}
 				{size}
-				{...segment}
-				class="{segment.class} {narrow}"
+				class={narrow}
 			>
 				<span class={[narrow && "hidden @min-[42rem]/toolbar:inline"]}
 					>{style === "split" ? "Split" : "Unified"}</span
 				>
-			</Button>
+			</Segment>
 		{/each}
-	</ButtonGroup>
+	</SegmentedControl>
 {/snippet}
 
 {#if loading && !diff}
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
index 524249d7c..97d01dfec 100644
--- a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
@@ -5,8 +5,8 @@
 	import GitPullRequest from "$icon/git-pull-request";
 	import Play from "$icon/play";
 	import Layers2 from "$icon/layers-2";
-	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentLabel, segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import ListToolbar from "$lib/components/ui/ListToolbar.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
@@ -42,32 +42,14 @@
 	{/snippet}
 
 	{#snippet filters()}
-		<ButtonGroup segmented>
-			<Button
-				href={segmentHref("all")}
-				{...segmentProps(filter === "all", true)}
-				icon={Layers2}
-			>
-				<span class={segmentLabel(filter === "all")}>All</span>
-			</Button>
-			<Button
-				href={segmentHref("push")}
-				{...segmentProps(filter === "push", true)}
-				icon={GitCommitHorizontal}
-			>
-				<span class={segmentLabel(filter === "push")}>Push</span>
-			</Button>
-			<Button
-				href={segmentHref("pull_request")}
-				{...segmentProps(filter === "pull_request", true)}
-				icon={GitPullRequest}
-			>
+		<SegmentedControl value={filter} href={segmentHref} label="Trigger">
+			<Segment value="all" collapsible icon={Layers2}>All</Segment>
+			<Segment value="push" collapsible icon={GitCommitHorizontal}>Push</Segment>
+			<Segment value="pull_request" collapsible icon={GitPullRequest}>
 				<!-- nbsp: a plain space between the spans gets collapsed away -->
-				<span class={segmentLabel(filter === "pull_request")}
-					>Pull<span class="hidden sm:inline">&nbsp;request</span></span
-				>
-			</Button>
-		</ButtonGroup>
+				Pull<span class="hidden sm:inline">&nbsp;request</span>
+			</Segment>
+		</SegmentedControl>
 	{/snippet}
 
 	{#snippet trailing()}
diff --git a/web/src/lib/components/repo/tickets/TicketToolbar.svelte b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
index ccf76dc7f..6f4917903 100644
--- a/web/src/lib/components/repo/tickets/TicketToolbar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
@@ -7,7 +7,8 @@
 	import GitPullRequestClosed from "$icon/git-pull-request-closed";
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentLabel, segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import ListToolbar from "$lib/components/ui/ListToolbar.svelte";
 	import TicketSearch from "$lib/components/repo/tickets/TicketSearch.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
@@ -44,42 +45,27 @@
 	{/snippet}
 
 	{#snippet filters()}
-		<ButtonGroup segmented>
-			<Button
-				href={resolve(`${base}?state=open` as "/")}
-				{...segmentProps(state === "open", true)}
-				icon={isPull ? GitPullRequest : CircleDot}
-			>
-				<span class={segmentLabel(state === "open")}>
-					<span class="hidden sm:inline">{@render pendingCount(openCount)}</span>
-					Open
-				</span>
-			</Button>
+		<SegmentedControl
+			value={state}
+			href={(value) => resolve(`${base}?state=${value}` as "/")}
+			label="State"
+		>
+			<Segment value="open" collapsible icon={isPull ? GitPullRequest : CircleDot}>
+				<span class="hidden sm:inline">{@render pendingCount(openCount)}</span>
+				Open
+			</Segment>
 			{#if isPull}
-				<Button
-					href={resolve(`${base}?state=completed` as "/")}
-					{...segmentProps(state === "completed", true)}
-					icon={GitMerge}
-				>
-					<span class={segmentLabel(state === "completed")}>
-						<span class="hidden sm:inline"
-							>{@render pendingCount(completedCount ?? 0)}</span
-						>
-						Merged
-					</span>
-				</Button>
+				<Segment value="completed" collapsible icon={GitMerge}>
+					<span class="hidden sm:inline">{@render pendingCount(completedCount ?? 0)}</span
+					>
+					Merged
+				</Segment>
 			{/if}
-			<Button
-				href={resolve(`${base}?state=closed` as "/")}
-				{...segmentProps(state === "closed", true)}
-				icon={isPull ? GitPullRequestClosed : Ban}
-			>
-				<span class={segmentLabel(state === "closed")}>
-					<span class="hidden sm:inline">{@render pendingCount(closedCount)}</span>
-					Closed
-				</span>
-			</Button>
-		</ButtonGroup>
+			<Segment value="closed" collapsible icon={isPull ? GitPullRequestClosed : Ban}>
+				<span class="hidden sm:inline">{@render pendingCount(closedCount)}</span>
+				Closed
+			</Segment>
+		</SegmentedControl>
 	{/snippet}
 
 	{#snippet trailing()}
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
index bf055fe13..a0b44d635 100644
--- a/web/src/lib/components/ui/ButtonGroup.stories.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 
 	const { Story } = defineMeta({
 		title: "UI/ButtonGroup",
@@ -49,34 +49,9 @@
 	</div>
 </Story>
 
-<!--
-	The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
-	the selected segment gets the `default` variant, unselected segments are
-	`ghost`. Never plain `default` for unselected — that reads as the hovered state.
--->
-<Story name="Tab Switcher">
-	<div class="flex flex-col items-start gap-md">
-		<ButtonGroup segmented>
-			<Button {...segmentProps(true)}>Open</Button>
-			<Button {...segmentProps(false)}>Closed</Button>
-		</ButtonGroup>
-		<!-- selected in the middle: hovering either neighbour used to rub out the border on the
-		     edge they share, so this is the case to check when touching the group's layering -->
-		<ButtonGroup segmented>
-			<Button {...segmentProps(false)}>All</Button>
-			<Button {...segmentProps(true)}>Push</Button>
-			<Button {...segmentProps(false)}>Pull request</Button>
-		</ButtonGroup>
-	</div>
-</Story>
-
 <Story name="Vertical">
-	{#snippet template()}
-		<div class="">
-			<ButtonGroup segmented direction="vertical">
-				<Button {...segmentProps(true)}>Open</Button>
-				<Button {...segmentProps(true)}>Closed</Button>
-			</ButtonGroup>
-		</div>
-	{/snippet}
+	<ButtonGroup direction="vertical">
+		<Button>Button</Button>
+		<Button>Button</Button>
+	</ButtonGroup>
 </Story>
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index bd47caea8..8caf0e7a1 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -1,32 +1,12 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
-	import type { ButtonVariants } from "$lib/components/ui/Button.svelte";
 
 	export const buttonGroup = tv({
 		base: "inline-flex items-center",
 		variants: {
 			spaced: {
 				true: "gap-xs",
-				false: ""
-			},
-			segmented: {
-				true: [
-					"items-stretch rounded-md bg-background-inset p-0.5 ring ring-border-default/70 dark:bg-background-canvas",
-					"[--seg-inset:4px] *:[--btn-radius:calc(var(--radius-md)-2px)]",
-					"[&>*:focus-visible]:-outline-offset-2"
-				],
-				false: ""
-			},
-			direction: {
-				horizontal: [""],
-				vertical: ["flex-col"]
-			}
-		},
-		compoundVariants: [
-			{
-				spaced: false,
-				segmented: false,
-				class: [
+				false: [
 					"relative items-stretch gap-none overflow-hidden rounded-md bg-background-subtle dark:bg-background-canvas",
 					"after:pointer-events-none after:absolute after:inset-0 after:z-20 after:rounded-md after:border after:border-border-default after:content-['']",
 					"*:relative",
@@ -40,43 +20,19 @@
 					"[&>*:not([data-variant=ghost])]:z-10",
 					"[&>*:focus-visible]:-outline-offset-2"
 				]
+			},
+			direction: {
+				horizontal: [""],
+				vertical: ["flex-col"]
 			}
-		],
+		},
 		defaultVariants: {
 			spaced: false,
-			segmented: false,
 			direction: "horizontal"
 		}
 	});
 
 	export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
-
-	export function segmentProps(
-		selected: boolean,
-		collapsible = false
-	): {
-		variant: ButtonVariants["variant"];
-		class?: string;
-	} {
-		return selected
-			? {
-					variant: "default",
-					class: "shadow-sm hover:bg-background-default"
-				}
-			: {
-					variant: "ghost",
-					class: [
-						"text-foreground-muted hover:bg-transparent hover:text-foreground-default",
-						collapsible && "max-sm:pr-2.25"
-					]
-						.filter(Boolean)
-						.join(" ")
-				};
-	}
-
-	export function segmentLabel(selected: boolean): string | undefined {
-		return selected ? undefined : "max-sm:sr-only";
-	}
 </script>
 
 <script lang="ts">
@@ -84,7 +40,6 @@
 
 	interface Props {
 		spaced?: ButtonGroupVariants["spaced"];
-		segmented?: ButtonGroupVariants["segmented"];
 		direction?: ButtonGroupVariants["direction"];
 		class?: string;
 		children: Snippet;
@@ -92,14 +47,13 @@
 
 	let {
 		spaced = false,
-		segmented = false,
 		direction = "horizontal",
 		class: className,
 		children,
 		...rest
 	}: Props = $props();
 
-	const classes = $derived(buttonGroup({ spaced, segmented, direction, class: className }));
+	const classes = $derived(buttonGroup({ spaced, direction, class: className }));
 </script>
 
 <div class={classes} {...rest}>
diff --git a/web/src/lib/components/ui/Segment.svelte b/web/src/lib/components/ui/Segment.svelte
new file mode 100644
index 000000000..c649bd82f
--- /dev/null
+++ b/web/src/lib/components/ui/Segment.svelte
@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const segment = tv({
+		base: "relative z-10 transition-[color] duration-150 hover:bg-transparent",
+		variants: {
+			selected: {
+				true: "text-foreground-default",
+				false: "text-foreground-muted hover:text-foreground-default"
+			},
+			painted: {
+				true: "bg-background-default shadow-sm edge-ring-inset hover:bg-background-default",
+				false: ""
+			},
+			collapsed: {
+				true: "max-sm:pr-2.25",
+				false: ""
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import { getSegmentedControl } from "$lib/components/ui/SegmentedControl.svelte";
+
+	type Props = Omit<ComponentProps<typeof Button>, "variant" | "href" | "role" | "value"> & {
+		value: string;
+		collapsible?: boolean;
+	};
+
+	let {
+		value,
+		collapsible = false,
+		class: className,
+		onclick,
+		children,
+		...rest
+	}: Props = $props();
+
+	const control = getSegmentedControl();
+	const selected = $derived(control.value === value);
+	const href = $derived(control.href?.(value));
+
+	const select = (event: MouseEvent) => {
+		onclick?.(event as Parameters<NonNullable<typeof onclick>>[0]);
+		if (event.defaultPrevented) return;
+		if (
+			href &&
+			(event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+		)
+			return;
+		control.select(value);
+	};
+</script>
+
+<Button
+	{...rest}
+	variant="ghost"
+	{href}
+	role={href ? undefined : "radio"}
+	aria-checked={href ? undefined : selected}
+	aria-current={href && selected ? "page" : undefined}
+	tabindex={href || selected ? undefined : -1}
+	data-segment={value}
+	onclick={select}
+	class={segment({
+		selected,
+		painted: selected && !control.ready,
+		collapsed: collapsible && !selected,
+		class: className
+	})}
+>
+	{#if collapsible && children}
+		<span class={selected ? undefined : "max-sm:sr-only"}>{@render children()}</span>
+	{:else}
+		{@render children?.()}
+	{/if}
+</Button>
diff --git a/web/src/lib/components/ui/SegmentedControl.stories.svelte b/web/src/lib/components/ui/SegmentedControl.stories.svelte
new file mode 100644
index 000000000..dea471e53
--- /dev/null
+++ b/web/src/lib/components/ui/SegmentedControl.stories.svelte
@@ -0,0 +1,59 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import CircleDot from "$icon/circle-dot";
+	import Ban from "$icon/ban";
+	import LayoutGrid from "$icon/layout-grid";
+	import List from "$icon/list";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/SegmentedControl",
+		component: SegmentedControl,
+		tags: ["autodocs"]
+	});
+</script>
+
+<script lang="ts">
+	let filter = $state("push");
+	let ticketState = $state("open");
+	let layout = $state("cards");
+	let size = $state("small");
+</script>
+
+<Story name="Default" asChild>
+	<SegmentedControl bind:value={filter} label="Trigger">
+		<Segment value="all">All</Segment>
+		<Segment value="push">Push</Segment>
+		<Segment value="pull_request">Pull request</Segment>
+	</SegmentedControl>
+</Story>
+
+<Story name="Icons" asChild>
+	<SegmentedControl bind:value={ticketState} label="State">
+		<Segment value="open" icon={CircleDot}>Open</Segment>
+		<Segment value="closed" icon={Ban}>Closed</Segment>
+	</SegmentedControl>
+</Story>
+
+<Story name="Collapsible" asChild>
+	<SegmentedControl bind:value={ticketState} label="State">
+		<Segment value="open" collapsible icon={CircleDot}>Open</Segment>
+		<Segment value="closed" collapsible icon={Ban}>Closed</Segment>
+	</SegmentedControl>
+</Story>
+
+<Story name="Icon Only" asChild>
+	<SegmentedControl bind:value={layout} label="Layout">
+		<Segment value="cards" size="small" icon={LayoutGrid} aria-label="Cards view" />
+		<Segment value="list" size="small" icon={List} aria-label="List view" />
+	</SegmentedControl>
+</Story>
+
+<Story name="Full Width" asChild>
+	<SegmentedControl bind:value={size} label="Size" class="flex w-80">
+		<Segment value="small" class="flex-1">Small</Segment>
+		<Segment value="regular" class="flex-1">Regular</Segment>
+		<Segment value="large" class="flex-1">Large</Segment>
+	</SegmentedControl>
+</Story>
diff --git a/web/src/lib/components/ui/SegmentedControl.svelte b/web/src/lib/components/ui/SegmentedControl.svelte
new file mode 100644
index 000000000..8f66ee8a1
--- /dev/null
+++ b/web/src/lib/components/ui/SegmentedControl.svelte
@@ -0,0 +1,163 @@
+<script module lang="ts">
+	import { getContext, setContext } from "svelte";
+	import { tv } from "tailwind-variants";
+	import type { ResolvedPathname } from "$app/types";
+
+	export const segmentedControl = tv({
+		slots: {
+			group: [
+				"relative isolate inline-flex items-stretch rounded-md bg-background-inset p-0.5 ring ring-border-default/70 dark:bg-background-canvas",
+				"[--seg-inset:4px] *:[--btn-radius:calc(var(--radius-md)-2px)]",
+				"[&>*:focus-visible]:-outline-offset-2"
+			],
+			thumb: [
+				"pointer-events-none absolute top-0 left-0 rounded-(--btn-radius) bg-background-default shadow-sm edge-ring-inset",
+				"transition-[translate,width,height]"
+			]
+		},
+		variants: {
+			ready: {
+				true: { thumb: "opacity-100" },
+				false: { thumb: "opacity-0" }
+			}
+		}
+	});
+
+	interface SegmentedControlContext {
+		readonly value: string | undefined;
+		readonly ready: boolean;
+		href?: (value: string) => ResolvedPathname;
+		select: (value: string) => void;
+	}
+
+	const SEGMENTED_CONTROL = Symbol("segmented-control");
+
+	export const getSegmentedControl = () => getContext<SegmentedControlContext>(SEGMENTED_CONTROL);
+</script>
+
+<script lang="ts" generics="T extends string">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/state";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { RAIL_DURATION, RAIL_EASING } from "$lib/motion/spring";
+
+	interface Props {
+		value: T;
+		href?: (value: T) => ResolvedPathname;
+		label?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { value = $bindable(), href, label, class: className, children }: Props = $props();
+
+	let pending = $state<T>();
+	const current = $derived(pending ?? value);
+
+	$effect(() => {
+		void value;
+		pending = undefined;
+	});
+
+	let navigated = false;
+	$effect(() => {
+		if (navigating.to) {
+			navigated = true;
+		} else if (navigated) {
+			navigated = false;
+			pending = undefined;
+		}
+	});
+
+	let group = $state<HTMLElement>();
+	let box = $state<{ left: number; top: number; width: number; height: number }>();
+	let animate = $state(false);
+
+	let placed: string | undefined;
+
+	const measure = (animated: boolean) => {
+		const node = group?.querySelector<HTMLElement>(`[data-segment="${CSS.escape(current)}"]`);
+		const next = node?.offsetParent
+			? {
+					left: node.offsetLeft,
+					top: node.offsetTop,
+					width: node.offsetWidth,
+					height: node.offsetHeight
+				}
+			: undefined;
+		animate = animated;
+		box = next;
+		return next !== undefined;
+	};
+
+	$effect(() => {
+		placed = measure(placed !== undefined && placed !== current) ? current : undefined;
+	});
+
+	$effect(() => {
+		if (!group) return;
+		const observer = new ResizeObserver(() => measure(false));
+		observer.observe(group);
+		for (const node of group.querySelectorAll("[data-segment]")) observer.observe(node);
+		return () => observer.disconnect();
+	});
+
+	setContext<SegmentedControlContext>(SEGMENTED_CONTROL, {
+		get value() {
+			return current;
+		},
+		get ready() {
+			return box !== undefined;
+		},
+		get href() {
+			return href as ((value: string) => ResolvedPathname) | undefined;
+		},
+		select: (next) => {
+			if (href) pending = next as T;
+			else value = next as T;
+		}
+	});
+
+	const onkeydown = (event: KeyboardEvent) => {
+		if (!group) return;
+		const radios = [
+			...group.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)')
+		];
+		const index = radios.indexOf(event.target as HTMLButtonElement);
+		if (index < 0) return;
+		const target = {
+			ArrowRight: index + 1,
+			ArrowDown: index + 1,
+			ArrowLeft: index - 1,
+			ArrowUp: index - 1,
+			Home: 0,
+			End: radios.length - 1
+		}[event.key];
+		if (target === undefined) return;
+		event.preventDefault();
+		const radio = radios[(target + radios.length) % radios.length];
+		radio.focus();
+		radio.click();
+	};
+
+	const style = $derived(segmentedControl({ ready: box !== undefined }));
+</script>
+
+<div
+	bind:this={group}
+	role={href ? "group" : "radiogroup"}
+	aria-label={label}
+	class={style.group({ class: className })}
+	onkeydown={href ? undefined : onkeydown}
+>
+	<span
+		aria-hidden="true"
+		class={style.thumb()}
+		style:translate="{box?.left ?? 0}px {box?.top ?? 0}px"
+		style:width="{box?.width ?? 0}px"
+		style:height="{box?.height ?? 0}px"
+		style:transition-duration="{animate && !prefersReducedMotion.current ? RAIL_DURATION : 0}ms"
+		style:transition-timing-function={RAIL_EASING}
+	></span>
+	{@render children()}
+</div>
diff --git a/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
index 8cbf9fe3a..20256c40f 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
@@ -55,7 +55,8 @@
 	import { atUriOf, didOf, gitOidOf } from "$lib/api/syntax";
 	import type { CommentView } from "$lib/components/comment/comments";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
@@ -757,20 +758,13 @@
 				</div>
 			</Card>
 		</div>
-		<ButtonGroup segmented class="flex w-full sm:hidden">
+		<SegmentedControl bind:value={tab} label="Section" class="flex w-full sm:hidden">
 			{#each tabs as { id, label, icon } (id)}
-				{@const segment = segmentProps(tab === id)}
-				<Button
-					{icon}
-					{...segment}
-					class="{segment.class} flex-1"
-					aria-pressed={tab === id}
-					onclick={() => (tab = id)}
-				>
+				<Segment value={id} {icon} class="flex-1">
 					{label}
-				</Button>
+				</Segment>
 			{/each}
-		</ButtonGroup>
+		</SegmentedControl>
 		{#if pull.versions.length}
 			<!-- PR Commits -->
 			<Card padding="small" class="space-y-xs {tab === 'commits' ? '' : 'max-sm:hidden'}">
diff --git a/web/src/routes/dev/components/+page.svelte b/web/src/routes/dev/components/+page.svelte
index a906cd64d..d29088c51 100644
--- a/web/src/routes/dev/components/+page.svelte
+++ b/web/src/routes/dev/components/+page.svelte
@@ -25,7 +25,9 @@
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonCard from "$lib/components/ui/ButtonCard.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import Segment from "$lib/components/ui/Segment.svelte";
+	import SegmentedControl from "$lib/components/ui/SegmentedControl.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import ColorBall from "$lib/components/ui/ColorBall.svelte";
@@ -139,6 +141,7 @@
 	let radio = $state("spindle.tangled.sh");
 	let select = $state("");
 	let combobox = $state("main");
+	let segmented = $state("push");
 	let pageNumber = $state(3);
 	let tags = $state<InputTag[]>([{ value: "oppi.li" }]);
 	let modalOpen = $state(false);
@@ -159,6 +162,7 @@
 		{ name: "Input", demo: input },
 		{ name: "Select", demo: selectDemo },
 		{ name: "ButtonGroup", demo: buttonGroup },
+		{ name: "SegmentedControl", demo: segmentedControlDemo },
 		{ name: "Combobox", demo: comboboxDemo },
 		{ name: "Toggle", demo: toggle },
 		{ name: "Field", demo: field },
@@ -240,13 +244,21 @@
 {/snippet}
 
 {#snippet buttonGroup()}
-	<ButtonGroup segmented>
-		<Button {...segmentProps(false)}>All</Button>
-		<Button {...segmentProps(true)}>Push</Button>
-		<Button {...segmentProps(false)}>Pull request</Button>
+	<ButtonGroup>
+		<Button>Button</Button>
+		<Button>Button</Button>
+		<Button>Button</Button>
 	</ButtonGroup>
 {/snippet}
 
+{#snippet segmentedControlDemo()}
+	<SegmentedControl bind:value={segmented} label="Trigger">
+		<Segment value="all">All</Segment>
+		<Segment value="push">Push</Segment>
+		<Segment value="pull_request">Pull request</Segment>
+	</SegmentedControl>
+{/snippet}
+
 {#snippet comboboxDemo()}
 	<div class="w-56">
 		<Combobox options={refs} bind:value={combobox} searchPlaceholder="Find a ref…" />