fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · fractalsvelte-ui · Actions

CloseButton

A standardized dismissal trigger for dialogs, drawers, toasts, and alerts. Renders a crisp vector close glyph with subtle hover emphasis.

All components Source

Install

CloseButton is a Svelte 5 close button component in @fractaldesign/fractalsvelte-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/fractalsvelte-ui

Import

import 
import { CloseButton } from '@fractaldesign/fractalsvelte-ui';

Usage

Example 
<CloseButton label={'Close'} size={'sm'} />

Props

Also accepts every attribute of HTMLButtonAttributes (without type), spread onto the root element.

NameTypeDefault
label string 'Close'
size Size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'sm'
type any —
class string ''
onclick (event: MouseEvent) => void —

Source

Show the CloseButton.svelte source
CloseButton.svelte 
<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';
	import type { Size } from '../../types';
	import IconButton from './IconButton.svelte';

	interface Props extends Omit<HTMLButtonAttributes, 'type'> {
		label?: string;
		size?: Size;
		type?: any;
		class?: string;
		onclick?: (event: MouseEvent) => void;
	}

	let {
		label = 'Close',
		size = 'sm',
		class: className = '',
		onclick,
		...restProps
	}: Props = $props();
</script>

<IconButton
	{label}
	variant="ghost"
	{size}
	shape="rounded"
	class="f-close-btn {className}"
	{onclick}
	{...(restProps as any)}
>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		width="14"
		height="14"
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		stroke-width="2.5"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path d="M18 6 6 18" />
		<path d="m6 6 12 12" />
	</svg>
</IconButton>

<style>
	@layer fractalsvelte-ui.components {
		:global(.f-close-btn) {
			opacity: 0.7;
			transition: opacity var(--f-duration-fast) var(--f-ease),
				background var(--f-duration-fast) var(--f-ease);
		}

		:global(.f-close-btn:hover) {
			opacity: 1;
			background: var(--f-hover);
		}
	}
</style>

Related components

CopyButton A one-click clipboard copy utility that transitions into a confirmed checkmark state upon copying.HoldToConfirm A high-stakes press-and-hold confirmation button with animated progress fill.IconButton A compact icon-only action button with accessible screen-reader labelling and hover tooltips.LinkButton A semantic navigation anchor styled with button dimensions and hover aesthetics.SlideUnlock A swipe-to-unlock gesture slider with draggable spring thumb, progress track fill, and success state.SplitButton A dual-action control pairing a primary button trigger with a secondary dropdown chevron button.