Pill

There are two types of pills, default (no icon) and outlined (icon). Either type can be removable or read-only.

The outlined variant should be used to represent objects within Viam like components, services, machines, fragments, etc. The icon should be the appropriate icon for the object type and the text should be the user-defined name of the object (ie. the machine name, component name, etc).

import { Pill } from '@viamrobotics/prime-core';

Default

Lion

Tiger

Bear

<div
  slot="component"
  class="flex flex-row gap-1.5"
>
  <Pill value="Lion" />
  <Pill value="Tiger" />
  <Pill value="Bear" />
</div>
```svelte
</Example>

### Default Not Removable

<Example>
<div
  slot="component"
  class="flex flex-row gap-1.5"
>
  <Pill
    value="Lion"
    removable={false}
  />
  <Pill
    value="Tiger"
    removable={false}
  />
  <Pill
    value="Bear"
    removable={false}
  />
</div>
```svelte
<Pill
  value="Lion"
  removable={false}
/>
<Pill
  value="Tiger"
  removable={false}
/>
<Pill
  value="Bear"
  removable={false}
/>

Icon

my-base

my-movement-sensor

my-nav-service

<Pill
  value="my-base"
  icon="viam-component"
/>
<Pill
  value="my-movement-sensor"
  icon="viam-component"
/>
<Pill
  value="my-nav-service"
  icon="viam-service"
/>

Icon Not Removable

my-base

my-movement-sensor

my-nav-service

<Pill
  value="my-base"
  icon="viam-component"
  removable={false}
/>
<Pill
  value="my-movement-sensor"
  icon="viam-component"
  removable={false}
/>
<Pill
  value="my-nav-service"
  icon="viam-service"
  removable={false}
/>

Link

my-machine-123

target-self-example

<Pill
  value="my-machine-123"
  icon="multiplication-box"
  href="https://i.imgur.com/aQCBxdr.png"
  removable={false}
/>
<Pill
  value="target-self-example"
  href="https://i.imgur.com/aQCBxdr.png"
  target="_self"
  removable={false}
/>