Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Alert

Description#

The Alert as the name suggests is used to create Alert Dialogs.

Import#

it can be imported from the core.

Code Example

import { Alert } from "@codecraftkit/core";

or alone.

Code Example

import Alert from "@codecraftkit/alert";

Usage#

Code Example

function MyApp() {
  const {isOpen, onOpen, onClose} = useDisclosure();
  return <>
    <Button size='xs' onClick={onOpen}>Open Alert</Button>
    <Alert
      title='Delete Access'
      body="Are you sure? You can't undo this action afterwards."
      isOpen={isOpen}
      onClose={onClose}
      handleAction={()=>alert("Hello")}
      // noCancelButton
      // loading
    />
   </>
}

Props#

name

type

required

default

description

title

String

no

The title of the Alert

body

ComponentString

no

Component that will be the content of the Alert

isOpen

Boolean

Yes

false

specify if the Alert is open or closed

onClose

Function

yes

Call when the component is closing

handleAction

Function

no

The function that executes the action button when it is click

textActionButton

String

no

Delete

The text that will be shown on the action button

actionButtonColor

String

no

The color of the action button

loading

Boolean

no

false

Loading Animation

noCancelButton

Boolean

no

Remove the cancel button

...rest

chakra style props

no

It receives also every prop of Chakra-ui AlertDialog component