ArtifactusePanelToggle

A button component that toggles the panel visibility and displays a badge with the artifact count. Includes a pulse animation when new artifacts are detected.

Import

Vue 3
Vue 2
React
Svelte

import { ArtifactusePanelToggle } from 'artifactuse/vue'

import { ArtifactusePanelToggle } from 'artifactuse/vue2'

import { ArtifactusePanelToggle } from 'artifactuse/react'

import { ArtifactusePanelToggle } from 'artifactuse/svelte'

Usage

Vue
React
Svelte

<template>
  <div class="chat-header">
    <h1>Chat</h1>
    <ArtifactusePanelToggle />
  </div>
</template>

<script setup>
import { ArtifactusePanelToggle } from 'artifactuse/vue'
</script>

import { ArtifactusePanelToggle } from 'artifactuse/react'

function ChatHeader() {
  return (
    <div className="chat-header">
      <h1>Chat</h1>
      <ArtifactusePanelToggle />
    </div>
  )
}

<script>
  import { ArtifactusePanelToggle } from 'artifactuse/svelte'
</script>

<div class="chat-header">
  <h1>Chat</h1>
  <ArtifactusePanelToggle />
</div>

Behavior

The toggle button automatically:

Shows artifact count - Badge displays number of detected artifacts
Indicates active state - Highlighted when panel is open
Pulses on new artifacts - Animated pulse when artifacts are first detected
Toggles panel - Click to open/close the panel

States

State	Appearance
No artifacts	Muted icon, no badge
Has artifacts (panel closed)	Primary color icon, badge with count, pulse animation
Has artifacts (panel open)	Active background, primary color

Custom Toggle

If you need a custom toggle button, use the useArtifactuse hook/composable:

Vue
React
Svelte

<template>
  <button 
    @click="togglePanel" 
    :class="{ active: state.isPanelOpen }"
  >
    <span v-if="hasArtifacts">{{ artifactCount }} artifacts</span>
    <span v-else>No artifacts</span>
  </button>
</template>

<script setup>
import { useArtifactuse } from 'artifactuse/vue'

const { 
  state, 
  togglePanel, 
  hasArtifacts, 
  artifactCount 
} = useArtifactuse()
</script>

import { useArtifactuse } from 'artifactuse/react'

function CustomToggle() {
  const { 
    state, 
    togglePanel, 
    hasArtifacts, 
    artifactCount 
  } = useArtifactuse()

  return (
    <button 
      onClick={togglePanel}
      className={state.isPanelOpen ? 'active' : ''}
    >
      {hasArtifacts ? `${artifactCount} artifacts` : 'No artifacts'}
    </button>
  )
}

<script>
  import { getArtifactuseContext } from 'artifactuse/svelte'

  const { 
    state, 
    togglePanel, 
    hasArtifacts, 
    artifactCount 
  } = getArtifactuseContext()
</script>

<button 
  on:click={togglePanel}
  class:active={$state.isPanelOpen}
>
  {#if $hasArtifacts}
    {$artifactCount} artifacts
  {:else}
    No artifacts
  {/if}
</button>

Styling

The default toggle uses these CSS classes:

.artifactuse-panel-toggle {
  /* Base button styles */
}

.artifactuse-panel-toggle--active {
  /* When panel is open */
}

.artifactuse-panel-toggle--has-artifacts {
  /* When artifacts exist */
}

.artifactuse-panel-toggle-badge {
  /* Artifact count badge */
}

Override with CSS variables:

.artifactuse-panel-toggle {
  --artifactuse-primary: 99, 102, 241;
}

Placement

Common placement patterns:

/* In chat header */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Fixed position */
.artifactuse-panel-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* In toolbar */
.toolbar {
  display: flex;
  gap: 8px;
}

Getting Started

Frameworks

Components

Artifacts

AI Prompts

Customization

ArtifactusePanelToggle

Import

Usage

Behavior

States

Custom Toggle

Styling

Placement

​Import

​Usage

​Behavior

​States

​Custom Toggle

​Styling

​Placement

Import

Usage

Behavior

States

Custom Toggle

Styling

Placement