Close Button

A button specifically designed for closing or dismissing elements.

Anatomy

<script>
  import { CloseButton } from "@saas-ui/svelte/components/close-button";
</script>

<CloseButton size="md" variant="ghost" />

Examples

Basic Accessibility

Basic close button with default styling.

<CloseButton />

Custom Icon Accessibility

Close button with a custom icon.

<CloseButton variant="ghost">
	<Icon as={XCircle} size="md" />
</CloseButton>

Sizes Accessibility

Use the size prop to change the size of the close button. Available sizes: 2xs, xs, sm, md, lg, xl.

<HStack gap={4} class="flex-wrap items-center">
	{#each closeButtonSizes as size}
		<CloseButton {size} variant="outline" />
	{/each}
</HStack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: ghost, outline, subtle, solid, glass.

<HStack gap={2}>
	<CloseButton variant="ghost" colour="indigo" />
	<CloseButton variant="outline" colour="indigo" />
	<CloseButton variant="subtle" colour="indigo" />
	<CloseButton variant="solid" colour="indigo" />
	<CloseButton variant="glass" colour="indigo" />
</HStack>

Props

Prop	Type	Default	Description
`size`	`2xs \| xs \| sm \| md \| lg \| xl`	`md`	The size of the component.
`variant`	`ghost \| outline \| subtle \| solid \| glass \| surface \| plain`	`ghost`	The visual style of the component.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`class`	`text`	-	Additional CSS classes to apply.