npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ds-kit/button

v5.2.1

Published

Button component

Downloads

7

Readme


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>