Buttons allow users to take actions, and make choices. They are a basic interactive building block of ds-kit UIs.
To see buttons in action, check out the control patterns 2, control patterns 3, control patterns 4 or the newsletter patterns.
import Button from "@ds-kit/button"
A basic example of a button can look like this:
<Button variant="primary">{"Button"}</Button>
There are a few button variants available within ds-kit. Use the variant prop to select one of four basic variants (ghost, primary, success, and danger).
<> <Button mr={2} variant="default"> Default </Button> <Button mr={2} variant="primary"> Primary </Button> <Button mr={2} variant="success"> Success </Button> <Button mr={2} variant="danger"> Danger </Button> </>
Ds-kit buttons come in three sizes: sm, md, and lg. Note the use of mr here to set a margin-right in order to add some space between the buttons.
<> <Button size="sm" variant="primary" mr={2}> Small </Button> <Button size="md" variant="primary" mr={2}> Medium </Button> <Button size="lg" variant="primary" mr={2}> Large </Button> </>
In addition to size and color, you can also make use of some options to customise the buttons. By default buttons are rounded, but you can also use the pill prop, to make them appear as pills. To raise a button, add the raised prop.
<> <Button variant="primary" raised> Raised Button </Button> <Button variant="primary" borderRadius="pill"> Pill Button </Button> </>
You can create circular buttons with a little bit of configuration, but if you are looking for a simpler alternative for circular buttons, check out @ds-kit/IconButton
<> <Button variant="primary" borderRadius="circle" px="0" width="md" size="md"> <svg viewBox="0 0 20 20" width="1.5rem" height="1.5rem" /> </Button> <Button variant="default" borderRadius="circle" px="0" width="md" size="md"> C </Button> </>
Buttons can also have icons in addition to or instead of text.
<> <Button variant="primary" mr={2}> <svg width="24px" height="24px" viewBox="0 0 24 24" style={{ marginRight: "0.5rem" }} > <polygon fill="#fff" points="16.59 8.59 18 10 12 16 6 10 7.41 8.59 12 13.17" /> </svg> Icon Button </Button> <Button variant="default" mr={2}> <svg width="24px" height="24px" viewBox="0 0 24 24" style={{ marginRight: "0.5rem" }} > <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"> <g transform="translate(4, 4)" stroke="#202021" strokeWidth="2"> <polyline strokeLinecap="square" points="8 4 8 8 11.2 11.2" /> <path d="M0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 C4.88,0 2.16,1.76 0.88,4.4" /> <polyline strokeLinecap="square" points="0.2112 0.456 0.88 4.4 4.824 3.7312" /> </g> </g> </svg> Another Button </Button> <Button variant="primary" borderRadius="circle" px="0" width="md" size="md" mr={2} > <svg width="24px" height="24px" viewBox="0 0 24 24"> <polygon fill="#fff" points="16.59 8.59 18 10 12 16 6 10 7.41 8.59 12 13.17" /> </svg> </Button> <Button variant="default" borderRadius="circle" px="0" width="md" size="md" mr={2} > <svg width="24px" height="24px" viewBox="0 0 24 24"> <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"> <path d="M22,5.91666667 C21.25,6.25 20.5,6.5 19.6666667,6.58333333 C20.5,6.08333333 21.1666667,5.25 21.5,4.33333333 C20.6666667,4.83333333 19.8333333,5.16666667 18.9166667,5.33333333 C18.1666667,4.5 17.0833333,4 15.9166667,4 C13.6666667,4 11.8333333,5.83333333 11.8333333,8.08333333 C11.8333333,8.41666667 11.8333333,8.75 11.9166667,9 C8.41666667,8.83333333 5.41666667,7.16666667 3.41666667,4.66666667 C3,5.33333333 2.83333333,6 2.83333333,6.75 C2.83333333,8.16666667 3.58333333,9.41666667 4.66666667,10.1666667 C4,10.1666667 3.33333333,10 2.83333333,9.66666667 C2.83333333,9.66666667 2.83333333,9.66666667 2.83333333,9.75 C2.83333333,11.75 4.25,13.4166667 6.08333333,13.75 C5.75,13.8333333 5.41666667,13.9166667 5,13.9166667 C4.75,13.9166667 4.5,13.9166667 4.25,13.8333333 C4.75,15.5 6.25,16.6666667 8.08333333,16.6666667 C6.66666667,17.75 4.91666667,18.4166667 3,18.4166667 C2.66666667,18.4166667 2.33333333,18.4166667 2,18.3333333 C3.83333333,19.5 6,20.1666667 8.25,20.1666667 C15.8333333,20.1666667 19.9166667,13.9166667 19.9166667,8.5 C19.9166667,8.33333333 19.9166667,8.16666667 19.9166667,8 C20.75,7.41666667 21.4166667,6.66666667 22,5.91666667 Z" fill="#202021" fillRule="nonzero" /> </g> </svg> </Button> </>
You can also fully customise your buttons. There are various options available to determine the size and shape of your buttons. These customisations are meant to be used for special cases, where the default shapes are insufficient.
Avoid customising colors beyond the variants available, but if necessary you can use the bg and color props, together with the bgHover, and bgColor props to set custom colors for your buttons
<> <Button bg="yellow.400" bgHover="yellow.500"> Custom Background </Button> <Button color="orange.400" bgHover="orange.400" colorHover="white"> Custom Color </Button> </>
Using the px prop, you can modify the horizontal padding in your buttons.
<Button variant="primary" px="5rem"> Wide Button </Button>
To make a button that spans the whole width of its parent component, you can use the width prop.
<Button variant="primary" width="100%"> Full-width button </Button>
You can render your button as any component by using the as prop.
<Button as="a" href="#" variant="primary"> Link Button </Button>
To use Button with type="submit" inside form
<form action="https://ds-kit.now.sh/packages/button"> <Button variant="primary" type="submit"> Submit </Button> </form>
asanyborderRadiusstringarrayOf"default"variantstringarrayOf"default"sizestringarrayOf"md"