feat(ButtonGroup): container for buttons
This commit is contained in:
33
src/shared/ui/Button/ButtonGroup.svelte
Normal file
33
src/shared/ui/Button/ButtonGroup.svelte
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!--
|
||||||
|
Component: SwissButtonGroup
|
||||||
|
Wraps SwissButtons in a warm-surface pill with a 1px gap and subtle border.
|
||||||
|
Use for segmented controls, view toggles, or any mutually exclusive button set.
|
||||||
|
-->
|
||||||
|
<script lang="ts">
|
||||||
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
import type { HTMLAttributes } from 'svelte/elements';
|
||||||
|
|
||||||
|
interface Props extends HTMLAttributes<HTMLDivElement> {
|
||||||
|
children?: Snippet;
|
||||||
|
class?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children, class: className, ...rest }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class={cn(
|
||||||
|
'flex items-center gap-1 p-1',
|
||||||
|
'bg-surface dark:bg-dark-bg',
|
||||||
|
'border border-black/5 dark:border-white/10',
|
||||||
|
'rounded-none',
|
||||||
|
'transition-colors duration-500',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{#if children}
|
||||||
|
{@render children()}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user