Close Button

Preview

CloseCloseCloseCloseClose

Code

import CloseButton from '@dinui/react/close-button'
import { IconCircleX } from '@tabler/icons-react'

export default function CloseButtonVariantDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <CloseButton size="xs" />

      <CloseButton size="sm" />

      <CloseButton size="md" />

      <CloseButton size="lg" />

      <CloseButton>
        <IconCircleX />
      </CloseButton>
    </div>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add close-button

   yarn

   yarn dlx @dinui/cli@latest add close-button

   pnpm

   pnpm dlx @dinui/cli@latest add close-button

   bun

   bunx @dinui/cli@latest add close-button

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @tabler/icons-react tailwind-variants type-fest

   yarn

   yarn add @tabler/icons-react tailwind-variants type-fest

   pnpm

   pnpm add @tabler/icons-react tailwind-variants type-fest

   bun

   bun add @tabler/icons-react tailwind-variants type-fest

3. Copy and paste the following code into your project

   import Button from '@dinui/react/button'
   import { IconX } from '@tabler/icons-react'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const closeButton = tv({
     slots: {
       root: ['text-fg-weaker hover:text-fg-weaker--hover'],
     },
   })
   
   const CloseButton = forwardRef<
     React.ComponentRef<typeof Button>,
     Merge<
       React.ComponentPropsWithoutRef<typeof Button>,
       {
         iconProps?: React.ComponentProps<typeof Button.Icon>
       }
     >
   >(({ iconProps, ...props }, ref) => {
     const { root } = closeButton()
   
     return (
       <Button
         variant="ghost"
         icon
         {...props}
         ref={ref}
         className={root({ className: props.className })}
       >
         <Button.Icon {...iconProps}>{props.children ?? <IconX />}</Button.Icon>
         <span className="sr-only">Close</span>
       </Button>
     )
   })
   CloseButton.displayName = 'CloseButton'
   
   export default CloseButton
   export { closeButton }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.