How to Use GDS Chip

See it in Storybook

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

Install it

npm i @nielsen-media/gds-chip

How to use GDS Web Components + React

Use it

// Chip
// Component Creation

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

export const GDSChipComponent = createComponent(React, "gds-chip", GDSChip, {
  onClick: "click",
});

export function CustomChip(props) {
  return (
    <GDSChipComponent
      size={props.size}
      color={props.color}
      label={props.label}
      righticon={props.righticon}
      lefticon={props.lefticon}
      mode={props.mode}
      onClick={props["on-click"]}
    >
      {props.label}
    </GDSChipComponent>
  );
}

// Global Navigation - Kitchen Sink Example

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

export const GDSChipComponent = createComponent(React, "gds-chip", GDSChip, {
  onClick: "click",
});

export function CustomChip(props) {
  return (
    <GDSChipComponent
      label={props.label}
      righticon="close"
      onClick={(e) => console.log(e)}
      size="tiny"
      color="blurple"
      mode="dark"
    >
      Label
    </GDSChipComponent>
  );
}