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;