title: Button
label: Button
status: live
context:
  component-type: element
variants:
  - name: default
    hidden: true
  - name: Primary
    context:
      text: Primary button
      theme: primary
      angular: <vf-button [text]="'Primary Button'" [theme]="'primary'"></vf-button>
      react: <vf-button [text]="'Primary Button'" [theme]="'primary'"></vf-button>
  - name: Secondary
    context:
      text: Secondary button
      theme: secondary
      angular: <vf-button [text]="'Secondary Button'" [theme]="'secondary'"></vf-button>
      react: <VfButton text="Secondary Button" theme="secondary" />
  - name: tertiary
    context:
      text: Tertiary button
      theme: tertiary
      angular: <vf-button [text]="'Tertiary Button'" [theme]="'tertiary'"></vf-button>
      react: <VfButton text="Tertiary Button" theme="tertiary" />
  - name: small
    context:
      text: Small button
      theme: primary
      size: sm
      angular: <vf-button [text]="'Small Button'" [theme]="'primary'" size="sm"></vf-button>
      react: <VfButton text="Small Button" theme="primary" size="sm" />
  - name: link
    context:
      text: a link variant
      theme: link
      angular: <vf-button [text]="'a link variant'" [theme]="'link'"></vf-button>
      react: <VfButton text="Link Button" theme="link" />
