Pill ​

A compact tab item primitive used by segmented tabs, underline tabs, and browser-style tabs.

Playground ​

Variants ​

Default
Tab14Tab14
Outline
Tab14Tab14
Underline
Tab14Tab14
Browser tab
Tab14Tab14
vue
<script setup>
import { Pill } from 'frappe-ui'

const variants = [
  { label: 'Default', variant: 'default' },
  { label: 'Outline', variant: 'outline' },
  { label: 'Underline', variant: 'underline' },
  { label: 'Browser tab', variant: 'browser-tab', browserTabBase: 'default' },
]
</script>

<template>
  <div class="flex flex-col gap-5 p-2">
    <div
      v-for="item in variants"
      :key="item.variant"
      class="flex items-center gap-6"
    >
      <div class="w-24 text-sm text-ink-gray-6">{{ item.label }}</div>
      <Pill
        label="Tab"
        :variant="item.variant"
        :browser-tab-base="item.browserTabBase"
      >
        <template #prefix>
          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
        </template>
        <template #suffix>
          <span
            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
            >14</span
          >
        </template>
      </Pill>
      <Pill
        label="Tab"
        active
        :variant="item.variant"
        :browser-tab-base="item.browserTabBase"
      >
        <template #prefix>
          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
        </template>
        <template #suffix>
          <span
            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
            >14</span
          >
        </template>
      </Pill>
    </div>
  </div>
</template>

Sizes ​

Small
TabTab14Icon
Medium
TabTab14Icon
vue
<script setup>
import { Pill } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-5 p-2">
    <div class="flex items-center gap-4">
      <div class="w-12 text-sm text-ink-gray-6">Small</div>
      <Pill size="sm" label="Tab">
        <template #prefix>
          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
        </template>
      </Pill>
      <Pill size="sm" label="Tab" active>
        <template #prefix>
          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
        </template>
        <template #suffix>
          <span
            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
            >14</span
          >
        </template>
      </Pill>
      <Pill size="sm" label="Icon" icon="lucide-star" active />
    </div>

    <div class="flex items-center gap-4">
      <div class="w-12 text-sm text-ink-gray-6">Medium</div>
      <Pill size="md" label="Tab">
        <template #prefix>
          <span class="lucide-star size-[18px] shrink-0" aria-hidden="true" />
        </template>
      </Pill>
      <Pill size="md" label="Tab" active>
        <template #prefix>
          <span class="lucide-star size-[18px] shrink-0" aria-hidden="true" />
        </template>
        <template #suffix>
          <span
            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
            >14</span
          >
        </template>
      </Pill>
      <Pill size="md" label="Icon" icon="lucide-star" active />
    </div>
  </div>
</template>

Browser edges ​

OverviewActivitySettings
OverviewActivitySettings
OverviewActivitySettings
vue
<script setup>
import { Pill } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-6 p-2">
    <div class="flex items-end gap-1 border-b border-outline-gray-2">
      <Pill variant="browser-tab" browser-tab-base="default" label="Overview" />
      <Pill
        variant="browser-tab"
        browser-tab-base="default"
        label="Activity"
        active
      />
      <Pill variant="browser-tab" browser-tab-base="default" label="Settings" />
    </div>

    <div class="flex gap-8">
      <div class="flex flex-col gap-1 border-r border-outline-gray-2 pr-0">
        <Pill variant="browser-tab" label="Overview" />
        <Pill
          variant="browser-tab"
          browser-tab-base="left"
          label="Activity"
          active
        />
        <Pill variant="browser-tab" label="Settings" />
      </div>

      <div class="flex flex-col gap-1 border-l border-outline-gray-2 pl-0">
        <Pill variant="browser-tab" label="Overview" />
        <Pill
          variant="browser-tab"
          browser-tab-base="right"
          label="Activity"
          active
        />
        <Pill variant="browser-tab" label="Settings" />
      </div>
    </div>
  </div>
</template>
PasswordPopover