Buttons | 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

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

Name	Type	Default	Description
`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.
`outline`	`boolean`	false	Applies Pico's outline button style.
`disabled`	`boolean`	false	Disables the control.
`loading`	`boolean`	false	Disables the control and sets aria-busy.
`value`	`string`	-	Label value for submit and reset input render modes.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

Slots

Name	Type	Default	Description
`default`	`slot`	-	Button content when rendering the default button mode.

Events

Name	Type	Default	Description
`native events`	`MouseEvent, FocusEvent, ...`	-	Native button/input events pass through Vue fallthrough attributes.