Installing <CloseButton> Component

There are 2 ways to install <CloseButton> component into your react app project:

  • Install the Specific Package of <CloseButton> Component
  • Install the Whole Reusable-UI Component Pack, including the <CloseButton> Component

Because <CloseButton> uses <Icon> and the <Icon> itself needs to be configured first, you'll need to do: Configuring <Icon>'s Resources below:

Configuring <Icon>'s Resources

After you install the <CloseButton>, you need to manually copy some resources into your application public directory.

Go to /node_modules/@reusable-ui/icon/public directory. Inside it, copy the fonts and icons directories into application public directory (in React: /public). So, the final files are something like this:

  • /public/fonts/*.(ttf|woff|woff2)
  • /public/icons/*.svg

Done! The required resources by the <Icon> and <CloseButton> component are now set! 😉

iconPosition Property

Determines the position of the icon.

The possible values are:

  • undefined
  • 'start'
  • 'end'

Here the preview:

Preview

Show code

onClick Property

Executes a JavaScript's callback function when the <CloseButton> is clicked.

Variant Properties

The alternative appearances of the <CloseButton> layout without changing the <CloseButton>'s functionality.

buttonStyle Property

Sets the alternative appearances of the <CloseButton>.

The possible values are:

  • undefined
  • 'regular'
  • 'link'
  • 'ghost'

Here the preview:

Preview

Show code

orientation Property

Sets the orientation of the <CloseButton>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview

Show code

size Property

Defines the alternative size of the <CloseButton>.

The possible values are:

  • undefined
  • 'xs'
  • 'sm'
  • 'md'
  • 'lg'
  • 'xl'

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <CloseButton>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview

Show code

gradient Property

Activates a 3D mode of the <CloseButton>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <CloseButton>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <CloseButton>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <CloseButton>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

State Properties

The conditions of the <CloseButton> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <CloseButton>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

inheritEnabled Property

Influences the <CloseButton>'s disabled state by <ancestor enabled={false}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

Component Properties

Overwrites the internal (sub) components used as the composition of <CloseButton> component.

buttonComponent Property

Overwrites the internal <Button> component used as the composition of <CloseButton> component.

<CloseButton buttonComponent={
    <MyCustomButton />
} />

iconComponent Property

Overwrites the internal <Icon> component used as the composition of <CloseButton> component.

<CloseButton iconComponent={
    <MyCustomIcon />
} />