Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Variants
  2. Composing Content
  3. Prop Table

Alert

import { Alert } from '@duik/it'
import Alert from '@duik/alert'

Alert is a simple component providing an interface for delivering information to user. For a proper usage, you should handle displaying the alert (e.g. in the fixed container) by yourself. Alerts have role="alert" set by default. Maximum width is set to 760px.

Variants

<Alert
  leftEl={<Icon>rocket</Icon>}
  rightEl={<button aria-label="Close" className="close" data-dismiss="alert" type="button"><Icon>close</Icon></button>}
>
  This is a default alert
</Alert>
ReactHTML Snippet
<Alert
  leftEl={<Icon>rocket</Icon>}
  primary
  rightEl={<button aria-label="Close" className="close" data-dismiss="alert" type="button"><Icon>close</Icon></button>}
>
  983 people started following you.
</Alert>
ReactHTML Snippet
<Alert
  leftEl={<Icon>rocket</Icon>}
  rightEl={<button aria-label="Close" className="close" data-dismiss="alert" type="button"><Icon>close</Icon></button>}
  success
>
  Yey, it's a success!
</Alert>
ReactHTML Snippet
<Alert
  danger
  leftEl={<Icon>rocket</Icon>}
  rightEl={<button aria-label="Close" className="close" data-dismiss="alert" type="button"><Icon>close</Icon></button>}
>
  Your dog needs some water!
</Alert>
ReactHTML Snippet
<Alert
  leftEl={<Icon>rocket</Icon>}
  rightEl={<button aria-label="Close" className="close" data-dismiss="alert" type="button"><Icon>close</Icon></button>}
  warning
>
  Your coffee might be too hot!
</Alert>
ReactHTML Snippet

Composing content

<Alert
  primary
  rightEl={<button aria-label="Close" className="close" data-dismiss="alert" type="button"><Icon>close</Icon></button>}
>
  <h4>
    Welcome to Dashboard UI Kit!
  </h4>
  <p>
    Super nice kit, easy to compose and build UIs with a beautiful design
  </p>
  <Button sm>
    Explore Documentation
  </Button>
</Alert>
ReactHTML Snippet

Prop table

children

Required: false

type: React.ReactNode
className

Required: false

type: string
className, e.g. "my-custom-styling"
primary

Required: false

type: boolean
Has blue color
danger

Required: false

type: boolean
Has red color
success

Required: false

type: boolean
Has green color
warning

Required: false

type: boolean
Has orange color
leftEl

Required: false

type: React.ReactNode
Renders node on the left side e.g. some icon
rightEl

Required: false

type: React.ReactNode
Renders node on the right side, e.g. close button
...rest

Required: false

type: any
Other properties are passed down to the wrapping element