Button

Trigger actions, submit forms, and navigate. Buttons communicate what action will occur when the user interacts with them.

Open in Storybook

Interactive Demo

Hierarchy: primarysecondary-colorsecondary-greyghostdanger Size: smalllarge Radius: regularcurved Loading Disabled Full Width

Hierarchy Variants

All hierarchy styles

Sizes

Size variants

Radius

Border radius styles

States

Loading and disabled states

Full Width

Full width button

Usage

<script setup>
import { Button } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Button
    hierarchy="primary"
    size="large"
    label="Submit"
    @click="handleSubmit"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
hierarchy	'primary' | 'secondary-color' | 'secondary-grey' | 'ghost' | 'danger'	'primary'	Visual style variant
size	'small' | 'large'	'large'	Button size
radius	'regular' | 'curved'	'regular'	Border radius style
label	string	''	Button text content
type	'button' | 'submit' | 'reset'	'button'	HTML button type attribute
disabled	boolean	false	Disabled state
loading	boolean	false	Loading state with animated dots
hasLeftIcon	boolean	false	Whether left icon slot is populated
hasRightIcon	boolean	false	Whether right icon slot is populated
iconOnly	boolean	false	Render as icon-only button (no label)
fullWidth	boolean	false	Stretch to full container width
skeleton	boolean	false	Show skeleton loading placeholder

Events

Event	Payload	Description
click	MouseEvent	Emitted on click (not emitted when disabled, loading, or type=submit)

Slots

Slot	Bindings	Description
default	—	Button text content (overrides label prop)
left-icon	—	Icon rendered before the label
right-icon	—	Icon rendered after the label
icon	—	Icon content for icon-only buttons

Accessibility

• Uses native <button> element for full keyboard support
• aria-busy applied during loading state
• aria-disabled reflects disabled state
• Disabled buttons prevent focus and click propagation
• Loading state is communicated to screen readers