pages._explore-components-base-button.title

pages._explore.sections.basic-usage.title

html

<BaseButton
    text="Show Alert"
    @triggered="fnButtonAction()"
/>

typescript

<script setup lang="ts">

// methods
const fnButtonAction = () => {
  alert('Button triggered!')
}
</script>

pages._explore.sections.complex-usage.title

html

<BaseButton
    text="Show Alert"
    :size="BaseButtonSizes.XS"
    :color="BaseButtonColors.PRIMARY"
    :variant="BaseButtonVariants.OUTLINE"
    @triggered="fnButtonAction()"
/>

typescript

<script setup lang="ts">
import { BaseButtonColors, BaseButtonSizes, BaseButtonVariants } from '#core-types/components/base/base-button'

// methods
const fnButtonAction = () => {
  alert('Button triggered!')
}
</script>

pages._explore.sections.props.title

Prop	Default	Type
variant	BaseButtonVariants.SOLID	BaseButtonVariants
size	BaseButtonSizes.SM	BaseButtonSizes
color	BaseButtonColors.SURFACE_RAISED	BaseButtonColors
icon	undefined	string
iconClasses	undefined	string
text	undefined	string
translate	false	boolean
tooltipText	undefined	string
tooltipTranslate	undefined	boolean
tooltipPosition	undefined	TooltipOpeningPositions
disabled	false	boolean

pages._explore.sections.types.title

Name	Type	Options
BaseButtonVariants	enum	SOLID \| OUTLINE
BaseButtonSizes	enum	XS \| SM \| MD \| LG
BaseButtonColors	enum	PRIMARY \| SECONDARY \| SUCCESS \| WARNING \| ERROR \| INFO \| SURFACE \| SURFACE_SUNKEN \| SURFACE_RAISED \| SURFACE_OVERLAY
BaseButtonTextSizes	enum	SOLID \| OUTLINE
TooltipOpeningPositions	enum	TOP \| BOTTOM \| LEFT \| RIGHT