<CloseButton>
Component
<CloseButton>
is a special <ButtonIcon>
for dismising a content.
It's used in <Alert>
, <ModalCard>
, <ModalSide>
, and more.
Here the demo:
<CloseButton>
Component<CloseButton>
is a special <ButtonIcon>
for dismising a content.
It's used in <Alert>
, <ModalCard>
, <ModalSide>
, and more.
Here the demo:
<CloseButton>
ComponentThere are 2 ways to install <CloseButton>
component into your react app project:
<CloseButton>
Component<CloseButton>
ComponentBecause <CloseButton>
uses <Icon>
and the <Icon>
itself needs to be configured first, you'll need to do: Configuring <Icon>
's Resources below:
<Icon>
's ResourcesAfter 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
PropertyDetermines the position of the icon.
The possible values are:
undefined
'start'
'end'
Here the preview:
onClick
PropertyExecutes a JavaScript's callback function when the <CloseButton>
is clicked.
The alternative appearances of the <CloseButton>
layout without changing the <CloseButton>
's functionality.
buttonStyle
PropertySets the alternative appearances of the <CloseButton>
.
The possible values are:
undefined
'regular'
'link'
'ghost'
Here the preview:
orientation
PropertySets the orientation of the <CloseButton>
.
The possible values are:
undefined
'inline'
'block'
Here the preview:
size
PropertyDefines the alternative size of the <CloseButton>
.
The possible values are:
undefined
'xs'
'sm'
'md'
'lg'
'xl'
Here the preview:
theme
PropertyDefines the contextual theme of the <CloseButton>
.
The possible values are:
undefined
'primary'
'secondary'
'success'
'info'
'warning'
'danger'
'light'
'dark'
Here the preview:
gradient
PropertyActivates a 3D mode of the <CloseButton>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
outlined
PropertyActivates an outlined mode (background-less, contrast foreground, and contrast border) of the <CloseButton>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
mild
PropertyActivates a mild mode (mild background, contrast foreground, and contrast border) of the <CloseButton>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
nude
PropertyActivates an nude mode (background-less, padding-less, and border-less) of the <CloseButton>
.
The possible values are:
undefined
true
false
Here the preview:
The conditions of the <CloseButton>
behavior or functionality.
enabled
PropertyDefines the enabled/disabled state of the <CloseButton>
.
The possible values are:
undefined
true
false
Here the preview:
inheritEnabled
PropertyInfluences the <CloseButton>
's disabled state by <ancestor enabled={false}>
.
The possible values are:
undefined
true
false
Here the preview:
Overwrites the internal (sub) components used as the composition of <CloseButton>
component.
buttonComponent
PropertyOverwrites the internal <Button>
component used as the composition of <CloseButton>
component.
<CloseButton buttonComponent={
<MyCustomButton />
} />
iconComponent
PropertyOverwrites the internal <Icon>
component used as the composition of <CloseButton>
component.
<CloseButton iconComponent={
<MyCustomIcon />
} />
Because <CloseButton>
is made from <ButtonIcon>
, so all properties from <ButtonIcon>
are inherited.