Pressable

Unstyled pressable wrapper that gives any custom content a tap feedback and button semantics.

Jump to API reference

Import

Vue
import { UiPressable } from '@ziyarago/ui/vue'

Button

Vue
<UiPressable label="Open hotel">
  Hilton Makkah, 5 nights
</UiPressable>

Disabled

Vue
<UiPressable label="Sold out" disabled>
  Sold out
</UiPressable>

API reference

Unstyled pressable wrapper that makes any content a button with press feedback.

Props

PropType and valuesDefaultDescription
asstring'button'HTML tag. type="button" is set only when this is button.
labelstring—Accessible name (aria-label).
disabledbooleanfalseBlocks interaction.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultPressable content.

Events

Vue: @name. React: onName.

clickNative click event.

Notes

  • For a non-button tag add role and keyboard handling yourself.