How to Use GDS Button Component

See it in Storybook

Component API

TIP: You can change the different values of the component props under the controls tab.

Install it

npm i @nielsen-media/gds-button

How to use GDS Web Component + React

Use it

First we create an instance of our Component in React.

// Button
// Component Creation

import React from "react";
import { createComponent } from "@lit-labs/react";
import Button from "@nielsen-media/gds-button/lib/src";

export const ButtonComponent = createComponent(React, "gds-button", Button, {
  onClick: "click",
});

export function GDSButton(props) {
  return (
    <ButtonComponent
      background={props.background}
      color={props.color}
      disabled={props.disabled}
      label={props.label}
      icon={props.icon}
      icon-position={props["icon-position"]}
      rounded={props.rounded}
      size={props.size}
      mode={props.mode}
      onClick={props["on-click"]}
    >
      {props.label}
    </ButtonComponent>
  );
}

Now we can use it in our React project.

// Button
// Implementation

import React from "react";
import { GDSButton } from "../components/Button";
import "@nielsen-media/gds-styles/scss/index.scss";

const sizes = ["jumbo", "regular", "compact", "tiny"];

export const Button = () => {
  return (
    <>
      <h2>Button - Light mode</h2>
      <div className="gds-d-flex gds-gap-column-200 gds-m-300">
        {sizes.map((size) => (
          <GDSButton
            background="solid"
            color="primary"
            size={size}
            mode="light"
            label="Label"
            on-click={(e) => console.log(e)}
          />
        ))}
      </div>
      <div className="gds-d-flex gds-m-300">
        {sizes.map((size) => (
          <GDSButton
            background="solid"
            color="primary"
            size={size}
            mode="light"
            label="Label"
            rounded="all"
          />
        ))}
      </div>
      <div className="gds-d-flex gds-m-300">
        {sizes.map((size) => (
          <GDSButton
            background="solid"
            color="secondary"
            size={size}
            mode="light"
            label="Label"
            rounded="all"
          />
        ))}
      </div>
    </>
  );
};

export default Button;
  • GDS + React Vanilla Implementation

    import React from "react";
    import { GDSButton } from "../components/Button";
    import "@nielsen-media/gds-styles/scss/index.scss";
    
    const sizes = ["jumbo", "regular", "compact", "tiny"];
    
    export const Button = () => {
      return (
        <>
          <h2>Button - Light mode</h2>
          <div className="gds-d-flex gds-gap-column-200 gds-m-300">
            {sizes.map((size) => (
              <GDSButton
                background="solid"
                color="primary"
                size={size}
                mode="light"
                label="Label"
                on-click={(e) => console.log(e)}
              />
            ))}
          </div>
          <div className="gds-d-flex gds-m-300">
            {sizes.map((size) => (
              <GDSButton
                background="solid"
                color="primary"
                size={size}
                mode="light"
                label="Label"
                rounded="all"
              />
            ))}
          </div>
          <div className="gds-d-flex gds-m-300">
            {sizes.map((size) => (
              <GDSButton
                background="solid"
                color="secondary"
                size={size}
                mode="light"
                label="Label"
                rounded="all"
              />
            ))}
          </div>
        </>
      );
    };
    
    export default Button;