How to Use GDS Action Icon

See it in Storybook

Component API

Install it

npm i @nielsen-media/gds-action-icon

How to use GDS Web Components with React

Use it

// Action Icon
// Component Creation

import React from "react";
import { createComponent } from "@lit-labs/react";
import ActionIcon from "@nielsen-media/gds-action-icon/lib/src";

export const ActionIconComponent = createComponent(
  React,
  "gds-action-icon",
  ActionIcon,
  {
    onClick: "click",
  }
);

export function GDSActionIcon(props) {
  return (
    <ActionIconComponent
      icon={props.icon}
      size={props.size}
      outlined={props.outlined}
      disabled={props.disabled}
      mode={props.mode}
      foreground={props.foreground}
      foreground-level={props["foreground-level"]}
      onClick={props.onClick}
    ></ActionIconComponent>
  );
}

// Action Icon - Usage Example

import React from "react";
import { GDSActionIcon } from "../components/ActionIcon";

export const ActionIcon = () => {
  return (
    <>
      <h2>Action Icon - Light mode</h2>
      <GDSActionIcon size="jumbo" icon="close" outlined="false" mode="light" />
      <GDSActionIcon
        size="regular"
        icon="close"
        outlined="false"
        mode="light"
      />
      <GDSActionIcon
        size="compact"
        icon="close"
        outlined="false"
        mode="light"
      />
      <GDSActionIcon size="tiny" icon="close" outlined="false" mode="light" />
      <h2>Action Icon - Dark mode</h2>
      <GDSActionIcon
        size="jumbo"
        icon="close"
        outlined="false"
        mode="dark"
        foreground="gray"
        foreground-level="100"
      />
      <GDSActionIcon
        size="regular"
        icon="close"
        outlined="false"
        mode="dark"
        foreground="gray"
        foreground-level="100"
      />
      <GDSActionIcon
        size="compact"
        icon="close"
        outlined="false"
        mode="dark"
        foreground="gray"
        foreground-level="100"
      />
      <GDSActionIcon
        size="tiny"
        icon="close"
        outlined="false"
        mode="dark"
        foreground="gray"
        foreground-level="100"
      />
    </>
  );
};

export default ActionIcon;