Dashboard UI Kit

Apps PreviewDownload Design Package

Button

import { Button } from '@duik/it'
import Button from '@duik/button'

Use buttons in forms, as links with many varieties.

Appearence

You can control apperence by simply passing boolean props to render some predefined stylings or you can pass your className or style props as well.

<Button>
  Default
</Button>
ReactHTML Snippet
<Button transparent>
  Transparent
</Button>
ReactHTML Snippet
<Button clear>
  Clear
</Button>
ReactHTML Snippet
<Button primary>
  Primary
</Button>
ReactHTML Snippet
<Button success>
  Success
</Button>
ReactHTML Snippet
<Button danger>
  Danger
</Button>
ReactHTML Snippet

Sizes & Shapes

Same as appearence, you can use set of predefined boolean props to quickly achieve the result

<Button sm>
  Small Button
</Button>
ReactHTML Snippet
<Button>
  Default Size
</Button>
ReactHTML Snippet
<Button lg>
  Large Button
</Button>
ReactHTML Snippet
<Button square>
  <Icon>
    rocket
  </Icon>
</Button>
ReactHTML Snippet

States

<Button disabled>
  Disabled
</Button>
ReactHTML Snippet
<Button loading>
  Loading
</Button>
ReactHTML Snippet
<Button loading primary>
  Loading primary
</Button>
ReactHTML Snippet

Using Button as <a> or <Link> from react-router-dom

By default, using <Button>Text</Button> renders <button>Text</button>. You can simply change this by passing Component prop. You can read more aboout Component prop on this page.

Rendering <a> tag

Simply use prop Component and pass "a" to it. Then you can pass other properties such as "href".

<Button primary Component="a" href="https://google.com">
  My External Link
</Button>

Result:

My External Link

<Link> from react-router-dom

We can use the same prop Component. Simply pass Link to the prop. Don't forget to pass other properties, such as "to" to the component.

import { Link } from 'react-router-dom'
...
<Button success Component={Link} to="#">
  My Internal Link
</Button>

Result:

My Internal Link

Button with Icons

You can easily compose buttons with icons. You can pass Icon (or any other component) as a children of the Button component. Check the details about importing and using Icon component here.

<Button primary>
  <Icon mr>
    message
  </Icon>
   With Icon on left
</Button>
ReactHTML Snippet
<Button primary>
  With Icon on right
  <Icon ml>
    attachment
  </Icon>
</Button>
ReactHTML Snippet
<Button square success>
  <Icon>
    check
  </Icon>
</Button>
ReactHTML Snippet

Prop table

children

false

type: React.ReactNode
className

false

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

false

type: React.Component | React.FunctionalComponent | string

default value: "button"

Renders the component with a given react element. By default, the component renders <button />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
type

false

type: string

default value: "button"

Applicable for button or input, otherwise button will be omitted.
isExpanded | block

false

type: boolean
Applies width: 100% and extra styling cases when used with icons etc.
xs | sm

false

type: boolean
Renders smaller button with height 30px
lg

false

type: boolean
Renders larger button with height 50px
primary

false

type: boolean
Has blue color
error | danger

false

type: boolean
Has red color
success

false

type: boolean
Has green color
dark

false

type: boolean
Has dark color
clear

false

type: boolean
White with light shadow.
transparent

false

type: boolean
Button background is transparent with borders.
isLoading | loading

false

type: boolean
Will render loading state
icon

false

type: DEPRECATED
Pass your icon as children instead
iconRight

false

type: DEPRECATED
Pass your icon as children instead
iconOnly

false

type: DEPRECATED
Use "square" property to render squared shape instead
...rest

false

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

Migration from Dashboard UI Kit 3

Icon properties are removed in favor to use icons as children instead. "iconOnly" property rendered button in square shape. Use "square" property instead.