BasicButton (Vue Component)

BasicButton is a typed Vue wrapper around the button SCSS system. It supports variants, sizes, icons, and states while forwarding all native attributes ( aria-*, data-*, etc.) to the underlying <button> element.

• Styling based on: Button
• Design: Figma Component: Button

Quick Start

Import

import { BasicButton } from '@pharma4u/patternlab/vue'

Basic Usage

<BasicButton variant="primary">
  Submit
</BasicButton>

Live Examples

Show Code

<script setup lang="ts">
  import { BasicButton } from '@pharma4u/patternlab'
  
</script>
    <BasicButton variant="primary" size="small" iconClass="fas fa-save" iconPosition="left" @click="handleOnClick">
      Save
    </BasicButton>
    <BasicButton variant="secondary-outline" iconArrow iconPosition="right">
      Next step
    </BasicButton>
    <BasicButton variant="link" disabled>
      Link style (disabled)
    </BasicButton>

Props

Prop	Type	Default	Description
type	'button' | 'submit' | 'reset'	'button'	Native button type
variant	'default' | 'primary' | 'primary-outline' | 'primarylight' | 'secondary' | 'secondary-outline' | 'light' | 'inverted' | 'link'	'default'	Visual style
state	'default' | 'success' | 'warning' | 'error'	'default'	State modifier
size	'default' | 'small' | 'medium' | 'large'	'default'	Size
iconClass	string	''	Icon class (e.g. FontAwesome)
iconPosition	'none' | 'left' | 'right' | 'up' | 'down'	'none'	Icon position
iconButton	boolean	false	Icon-only button
iconArrow	boolean	false	Arrow styling
flat	boolean	false	Flat style
underline	boolean	false	Underline style
dropdown	boolean	false	Dropdown style
filter	boolean	false	Filter style
fullWidth	boolean	false	Full width
block	boolean	false	Block display
disabled	boolean	false	Disabled state
modifiers	string | string[]	—	Extra -modifier classes

Events

Event	Payload	Description
click	MouseEvent	Fired on click (not emitted if disabled)

Slot

• default — Button content

Common Patterns

TBD

Notes

• Forwards all extra attributes (class, data-*, etc.) to <button>
• disabled prevents interaction and click emission
• modifiers are automatically prefixed with -