Files
ComfyUI_frontend/src/components/builder/StepBadge.vue
pythongosssss b3a5317500 App mode - builder toolbar - 6 (#9029)
## Summary

A toolbar for builder mode, hides various UI elements when in builder
mode

## Screenshots (if applicable)

Toolbar
<img width="706" height="166" alt="image"
src="https://github.com/user-attachments/assets/1f0b08b5-1661-4ed5-96bb-feecc73ca701"
/>

With disabled save and output required popover
<img width="711" height="299" alt="image"
src="https://github.com/user-attachments/assets/4a93aaf8-d850-4afe-ab9f-4abd44a25420"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9029-App-mode-builder-toolbar-6-30d6d73d365081e3aef5c90033ba347d)
by [Unito](https://www.unito.io)
2026-02-23 10:48:07 -08:00

23 lines
570 B
Vue

<template>
<div
class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-interface-builder-mode-button-background text-interface-builder-mode-button-foreground"
>
<i v-if="modelValue === step.id" :class="cn(step.icon, 'size-5')" />
<span v-else class="text-sm font-bold">
{{ index + 1 }}
</span>
</div>
</template>
<script setup lang="ts">
import { cn } from '@/utils/tailwindUtil'
import type { BuilderToolbarStep } from './types'
defineProps<{
step: BuilderToolbarStep
index: number
modelValue: string
}>()
</script>