Components

CloseButton

A Close Button is a button with a close icon and it used for closing bits and pieces.

Examples

A plain Close Button

<CloseButton />

Close Buttons in different sizes

<HStack gap={1}>
  <CloseButton size="xs" />
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</HStack>

Guidelines

When you have elements that can be closed, such as modals or dialogs, you should use a close button to indicate this.

The Close Button should be big enough for most users to click on it easily. If the button is small, you should leave some space around it. A good guideline is to make the clickable areas at least 44 x 44 px in size.

Code

`<CloseButton />`

import { CloseButton } from "@vygruppen/spor-react";

Props

Name	Type	Description
`size`	`"xs" \| "sm"`	Default "sm"
`aria-label`	`string`
`disabled`	`boolean`

Fundamentals

Getting started