Chip

Used for contacts and tags

<terra-chip>This is a chip!</terra-chip>
<terra-chip closeable>You can close this chip</terra-chip>

Examples

Default behavior of chips

By default, chips sit side by side and do not have a close button. Customize the text on each chip.

<terra-chip>Robotics</terra-chip>
<terra-chip>Press Releases</terra-chip>
<terra-chip>Next Year</terra-chip>

Closeable chips

Use the closeable prop to add a close button to chips. When clicked, the chip will emit a terra-remove event and remove itself from the DOM.

<terra-chip closeable>Click the X to remove</terra-chip>
<terra-chip closeable>Another closeable chip</terra-chip>
<terra-chip closeable>One more</terra-chip>

import TerraChip from '@nasa-terra/components/dist/react/chip';

const App = () => (
    <>
        <TerraChip closeable>Click the X to remove</TerraChip>
        <TerraChip closeable>Another closeable chip</TerraChip>
        <TerraChip closeable>One more</TerraChip>
    </>
);

Stacking chips

Use the stack prop to make chips stack vertically instead of sitting side by side.

<terra-chip stack>Robotics</terra-chip>
<terra-chip stack>Press Releases</terra-chip>
<terra-chip stack>Next Year</terra-chip>

import TerraChip from '@nasa-terra/components/dist/react/chip';

const App = () => (
    <>
        <TerraChip stack>Robotics</TerraChip>
        <TerraChip stack>Press Releases</TerraChip>
        <TerraChip stack>Next Year</TerraChip>
    </>
);

Customizing Chip Sizes

Use the “size” property to customize the size of the chip.

  <div>
    <terra-chip size="small">Small</terra-chip>
    <terra-chip size="small" closeable>Small</terra-chip>
  </div>

  <div>
    <terra-chip size="medium">Medium</terra-chip>
    <terra-chip size="medium" closeable>Medium</terra-chip>
  </div>

  <div>
    <terra-chip size="large">Large</terra-chip>
    <terra-chip size="large" closeable>Large</terra-chip>
  </div>

Adding custom behaviors to chips

Listen for the terra-remove event to perform custom actions when a closeable chip is removed. This example makes the chip disappear and also produces an alert.

<terra-chip closeable class="chip">Alert</terra-chip>
<script>
  const div = document.querySelector('.chip');

  div.addEventListener('terra-remove', event => {
    alert("This chip has been removed!");
  });
</script>

import TerraChip from '@nasa-terra/components/dist/react/chip'
const App = () => {
  function handleRemove(event) {
    alert("This chip has been removed");
  }

  return (
    <>
        <TerraChip closeable className="chip" onTerraRemove={handleRemove}>Alert</TerraChip>
    </>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/chip/chip.js"></script>

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/chip/chip.js';

import '@nasa-terra/components/dist/components/chip/chip.js';

import TerraChip from '@nasa-terra/components/dist/react/chip';

Slots

Learn more about using slots.

Properties

Learn more about attributes and properties.

Custom Properties

Learn more about customizing CSS custom properties.