Pear

PButton

PButton is the everyday button wrapper. It keeps Pico's button styles and adds a few Vue niceties: variants, loading state, submit/reset modes, and tooltips.

Variants

Primary, Secondary, Contrast

vue
<p-button>Primary</p-button>
<p-button variant="secondary">Secondary</p-button>
<p-button variant="contrast">Contrast</p-button>

Outline

vue
<p-button outline>Outline</p-button>
<p-button variant="secondary" outline>Secondary outline</p-button>
<p-button variant="contrast" outline>Contrast outline</p-button>
Groups
vue
<p-group>
  <p-button>Button 1</p-button>
  <p-button>Button 2</p-button>
  <p-button>Button 3</p-button>
</p-group>
States

Disabled

vue
<p-button disabled>Disabled</p-button>

Reset

vue
<p-button type="reset" value="Reset" />

Loading

vue
<p-button loading>Loading</p-button>
<p-button type="submit" value="Saving..." loading />
<p-button variant="secondary" loading>Secondary loading</p-button>
Tooltips
Save changesNothing to undo yet
vue
<p-button tooltip="Save changes" tooltip-placement="bottom">
  Save
</p-button>

<p-button variant="secondary" tooltip="Nothing to undo yet" disabled>
  Undo
</p-button>
API

Props

NameTypeDefaultDescription
type'button' | 'submit' | 'reset''button'Renders a native button, submit input, or reset input.
variant'secondary' | 'contrast'-Applies Pico's secondary or contrast button variant.
outlinebooleanfalseApplies Pico's outline button style.
disabledbooleanfalseDisables the control.
loadingbooleanfalseDisables the control and sets aria-busy.
valuestring-Label value for submit and reset input render modes.
tooltipstring-Optional Pico tooltip content.
tooltipPlacementPTooltipPlacement-Optional Pico tooltip placement.

Slots

NameTypeDefaultDescription
defaultslot-Button content when rendering the default button mode.

Events

NameTypeDefaultDescription
native eventsMouseEvent, FocusEvent, ...-Native button/input events pass through Vue fallthrough attributes.