Skip to main content
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

import { ArtifactusePanelToggle } from 'artifactuse/vue'

​
Usage

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

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

​
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

StateAppearance
No artifactsMuted 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: 
<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>

​
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;
}