title: "Button" slug: "/packages/button" category: "control" componentNames:
- "Button"
Button
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"Simple example
A basic example of a button can look like this:
<Button variant="primary">{"Button"}</Button>Button variants
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>
</>Button sizes
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>
</>Button options
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>
</>Circle buttons
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 with icons
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>
</>Custom buttons
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.
Colors
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>
</>Space
Using the px prop, you can modify the horizontal padding in your buttons.
<Button variant="primary" px="5rem">
Wide Button
</Button>Width
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>As-prop
You can render your button as any component by using the as prop.
<Button as="a" href="#" variant="primary">
Link Button
</Button>Form example
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>