'use client'
import { CloseButton } from '@saas-ui/react'
export const CloseButtonBasic = () => {
return <CloseButton />
}
Anatomy
import { CloseButton } from '@saas-ui/react/close-button'<CloseButton />Examples
Sizes
Use the size prop to change the size of the close button.
'use client'
import { For, HStack } from '@chakra-ui/react'
import { CloseButton } from '@saas-ui/react'
export const CloseButtonWithSizes = () => {
return (
<HStack gap="4" wrap="wrap">
<For each={['xs', 'sm', 'md', 'lg', 'xl']}>
{(size) => <CloseButton variant="outline" size={size} />}
</For>
</HStack>
)
}
Variants
Use the variant prop to change the appearance of the close button.
'use client'
import { HStack } from '@chakra-ui/react'
import { CloseButton } from '@saas-ui/react'
export const CloseButtonWithVariants = () => {
return (
<HStack>
<CloseButton variant="ghost" colorPalette="indigo" />
<CloseButton variant="outline" colorPalette="indigo" />
<CloseButton variant="subtle" colorPalette="indigo" />
<CloseButton variant="solid" colorPalette="indigo" />
<CloseButton variant="glass" colorPalette="indigo" />
</HStack>
)
}
Custom Icon
Use the children prop to change the icon of the close button.
'use client'
import { CloseButton } from '@saas-ui/react'
import { RiCloseLine } from 'react-icons/ri'
export const CloseButtonWithCustomIcon = () => {
return (
<CloseButton variant="ghost">
<RiCloseLine />
</CloseButton>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
variant | 'surface' | 'solid' | 'subtle' | 'glass' | 'surface' | 'outline' | 'ghost' | 'plain'The variant of the component |
loading | boolean | |
loadingText | React.ReactNode |