Component: Button Migration 2: IconButton (#7598)

## Summary

Still a work in progress. Buttons with just icons are already in the
stories for button.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7)
by [Unito](https://www.unito.io)
This commit is contained in:
Alexander Brown
2025-12-17 18:11:43 -08:00
committed by GitHub
parent 1d014c0dbe
commit fba580dc7d
35 changed files with 334 additions and 632 deletions

View File

@@ -1,7 +1,7 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { computed, provide, ref } from 'vue'
import IconButton from '@/components/button/IconButton.vue'
import Button from '@/components/ui/button/Button.vue'
import IconTextButton from '@/components/button/IconTextButton.vue'
import MoreButton from '@/components/button/MoreButton.vue'
import CardBottom from '@/components/card/CardBottom.vue'
@@ -74,7 +74,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
SearchBox,
MultiSelect,
SingleSelect,
IconButton,
Button,
IconTextButton,
MoreButton,
CardContainer,
@@ -277,9 +277,9 @@ const createStoryTemplate = (args: StoryArgs) => ({
<div class="w-full h-full bg-blue-500"></div>
</template>
<template #top-right>
<IconButton class="!bg-white !text-neutral-900" @click="() => {}">
<Button size="icon" class="!bg-white !text-neutral-900" @click="() => {}">
<i class="icon-[lucide--info] size-4" />
</IconButton>
</Button>
</template>
<template #bottom-right>
<SquareChip label="png" />
@@ -399,9 +399,9 @@ const createStoryTemplate = (args: StoryArgs) => ({
<div class="w-full h-full bg-blue-500"></div>
</template>
<template #top-right>
<IconButton class="!bg-white !text-neutral-900" @click="() => {}">
<Button size="icon" class="!bg-white !text-neutral-900" @click="() => {}">
<i class="icon-[lucide--info] size-4" />
</IconButton>
</Button>
</template>
<template #bottom-right>
<SquareChip label="png" />