Chip

The chip component presents information in a compact, visually distinct format. It can display text, icons, or both and supports various styles, including outlined, elevated, and text-only appearances.

Example

Basic Chip

The following example demonstrates a simple, outlined chip with default styling. Here, the textcolor property is explicitly set to white, but because the contrast with the background is insufficient, the chip automatically falls back to black text for better readability.

import "spatial-design-system/primitives/ar-chip.js";

<a-ar-chip
  position="0 1.5 -3"
  size="medium"
  outlined="true"
  label="Chip"
  textcolor="white"
></a-ar-chip>

Chip with Icon

This example demonstrates a chip with an icon. By default, if the iconpos property is not specified, the icon is positioned to the left of the label. Here, the chip uses the elevated style and a custom color.

import "spatial-design-system/primitives/ar-chip.js";

<a-ar-chip
  position="0 1.5 -3"
  size="medium"
  color="#03FCC6"
  elevated="true"
  label="Save"
  icon="/content-save.png"
></a-ar-chip>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the chip's visibility.
position	number[]	0 0 0	Specifies the chip's position.
size	enum (small, medium, large, extra-large)	medium	Specisies the size of the component.
opacity	number	1	Specifies the opacity of the component.
color	string (blue, #fff)	#00BA92	Defines the primary color of the chip, affecting elements such as text and background.
mode	string (light, dark)	""	Specifies the color scheme of the chip, supporting either a light or dark mode.
label	string	"Chip"	Sets the chip's label text.
textcolor	string	black	Specifies the color of the chip's text. If the contrast with the background is insufficient, the text color will not be applied.
icon	string	""	Defines the icon to be displayed within the chip. If set, the icon appears alongside the label, with its position controlled by the iconpos property.
iconpos	string (left, right)	left	Determines the position of the icon relative to the text. "left" places the icon before the text, while "right" places it after the text.
rounded	boolean	true	Determines whether the chip has rounded edges.
outlined	boolean	false	When enabled, the chip is displayed with an outline instead of a solid background.
elevated	boolean	false	Elevates chip with a shadow.
textonly	boolean	false	Removes the background and shadow, displaying the chip as plain text.