Button Frame Component

Comprehensive showcase of all button variants, sizes, and states

Code Examples

<!-- Basic Usage -->
<BaseButton variant="primary" size="md">Click Me</BaseButton>

<!-- With Icons -->
<BaseButton variant="secondary" size="lg" :left-icon="BellIcon">
  With Left Icon
</BaseButton>

<BaseButton variant="primary" size="md" :right-icon="ArrowRightIcon">
  With Right Icon
</BaseButton>

<!-- Icon Only -->
<BaseButton variant="tertiary" size="md" :left-icon="BellIcon" icon-only />

<!-- With Event Handler -->
<BaseButton variant="primary" size="md" @click="handleClick">
  Interactive Button
</BaseButton>

<!-- Event Handler Implementation -->
<script setup>
const handleClick = (event) => {
  console.log('Button clicked!', event)
}
</script>

<!-- Disabled State -->
<BaseButton variant="primary" size="md" disabled>
  Disabled Button
</BaseButton>

Button Frame Component

Button Variants

Primary

Secondary

Tertiary

Inverse

Primary Alt

Icon Variants

Left Icon

Right Icon

Icon Only

Button States

Default

Hover

Focus

Disabled

Interactive Examples

Code Examples