Chip

Type: React component

How to get Chip?

JavaScript

import { Chip } from 'fds/components';

A textual summarisation of a larger entity, generally used to represent the state of form-like components. Optionally shows a remove icon button, allowing you to implement behavior for clearing the entity.

This component is generally used inside a ChipGroup

Props

  1. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  2. label

    (Required)

    Type: String

    The human readable label displayed in the component.

  3. onClick

    (Optional)

    Type: Function

    A callback that is called whenever the component is clicked and is not in a disabled state.

    For more information about React and "events", check the React documentation

    Arguments

    Default value

  4. onRemove

    (Optional)

    Type: Function

    When set, renders a remove icon button which calls this function when clicking it.

    Default value

  5. useHoverStyles

    (Optional)

    Type: Boolean

    Whether or not the background color should change when hovering this component.

    Default value