import { Button } from '@duik/it'import Button from '@duik/button'Use buttons in forms, as links with many varieties.
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> <button class="btn" type="button" role="button">Default</button> ReactHTML Snippet | |
<Button transparent> Transparent </Button> <button class="btn btn-transparent" type="button" role="button">Transparent</button> ReactHTML Snippet | |
<Button clear> Clear </Button> <button class="btn btn-clear" type="button" role="button">Clear</button> ReactHTML Snippet | |
<Button primary> Primary </Button> <button class="btn btn-primary" type="button" role="button">Primary</button> ReactHTML Snippet | |
<Button success> Success </Button> <button class="btn btn-success" type="button" role="button">Success</button> ReactHTML Snippet | |
<Button danger> Danger </Button> <button class="btn btn-error" type="button" role="button">Danger</button> ReactHTML Snippet |
Same as appearence, you can use set of predefined boolean props to quickly achieve the result
<Button sm> Small Button </Button> <button class="btn btn-sm" type="button" role="button">Small Button</button> ReactHTML Snippet | |
<Button> Default Size </Button> <button class="btn" type="button" role="button">Default Size</button> ReactHTML Snippet | |
<Button lg> Large Button </Button> <button class="btn btn-lg" type="button" role="button">Large Button</button> ReactHTML Snippet | |
<Button square> <Icon> rocket </Icon> </Button> <button class="btn btn-square" type="button" role="button"> <i class="uikon">rocket</i> </button> ReactHTML Snippet |
<Button disabled> Disabled </Button> <button class="btn" disabled="" type="button" role="button">Disabled</button> ReactHTML Snippet | |
<Button loading> Loading </Button> <button class="btn btn-loading" type="button" role="button">Loading<span class="loader-dot btn-loader"> <span class="loader-dot-1"></span> <span class="loader-dot-2"></span> <span></span> </span> </button> ReactHTML Snippet | |
<Button loading primary> Loading primary </Button> <button class="btn btn-primary btn-loading" type="button" role="button">Loading primary<span class="loader-dot btn-loader"> <span class="loader-dot-1"></span> <span class="loader-dot-2"></span> <span></span> </span> </button> ReactHTML Snippet |
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.
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:
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:
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> <button class="btn btn-primary" type="button" role="button"> <i class="uikon mr">message</i> With Icon on left </button> ReactHTML Snippet | |
<Button primary> With Icon on right <Icon ml> attachment </Icon> </Button> <button class="btn btn-primary" type="button" role="button">With Icon on right<i class="uikon ml"> attachment</i> </button> ReactHTML Snippet | |
<Button square success> <Icon> check </Icon> </Button> <button class="btn btn-success btn-square" type="button" role="button"> <i class="uikon">check</i> </button> ReactHTML Snippet |
| children | Required: false |
| type: React.ReactNode | |
| className | Required: false |
| type: string | |
| className, e.g. "my-custom-styling" |
| Component | Required: 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 | Required: false |
| type: string | default value: "button" |
| Applicable for button or input, otherwise button will be omitted. |
| isExpanded | block | Required: false |
| type: boolean | |
| Applies width: 100% and extra styling cases when used with icons etc. |
| xs | sm | Required: false |
| type: boolean | |
| Renders smaller button with height 30px |
| lg | Required: false |
| type: boolean | |
| Renders larger button with height 50px |
| primary | Required: false |
| type: boolean | |
| Has blue color |
| error | danger | Required: false |
| type: boolean | |
| Has red color |
| success | Required: false |
| type: boolean | |
| Has green color |
| dark | Required: false |
| type: boolean | |
| Has dark color |
| clear | Required: false |
| type: boolean | |
| White with light shadow. |
| transparent | Required: false |
| type: boolean | |
| Button background is transparent with borders. |
| isLoading | loading | Required: false |
| type: boolean | |
| Will render loading state |
| icon | Required: false |
| type: DEPRECATED | |
| Pass your icon as children instead |
| iconRight | Required: false |
| type: DEPRECATED | |
| Pass your icon as children instead |
| iconOnly | Required: false |
| type: DEPRECATED | |
| Use "square" property to render squared shape instead |
| ...rest | Required: false |
| type: any | |
| Other properties are passed down to the wrapping element |
Icon properties are removed in favor to use icons as children instead. "iconOnly" property rendered button in square shape. Use "square" property instead.