Pressable
Pressable is a generic interactive component. It shares the same styling properties as View but also adds
pressable behavior, meaning that you can execute some logic in response to user interaction.
Use this component for creating interactive elements without the default styling that comes with Button and Link.
optional = ?
| Name | Type | Description |
|---|---|---|
| display? | "block" | "inline" |
Changes the display of the Pressable.inline follows the direction of words in a sentence based on the document’s writing mode.block follows the direction of paragraphs based on the document’s writing mode.Default value: 'block' |
| accessibilityLabel? | string |
A label that describes the purpose or contents of the element. When set, it will be announced to buyers using assistive technologies and will provide them with more context. |
| accessibilityRole? | "button" | "submit" |
The role of the button that will be rendered.button: renders a regular button.submit: renders a button that submits a form.Default value: 'button' |
| disabled? | boolean |
Disables the button, disallowing any interaction |
| id? | string |
A unique identifier for the Pressable. |
| loading? | boolean |
Disables the button while loading. Unlike Button, no indicator is rendered while loading. |
| onPress? | () => void |
Callback that is run when the button or link is pressed. |
| onBlur? | () => void |
Callback that is run when the button or link focus is removed. |
| onFocus? | () => void |
Callback that is run when the button or link is focused. |
| onPointerDown? | () => void |
Callback that is run when a pointing device button is pressed while the pointer is inside the button or link. |
| onPointerEnter? | () => void |
Callback that is run when the pointing device is over (enters) the button or link. |
| onPointerLeave? | () => void |
Callback that is run when the pointing device has left the button or link. |
| onPointerUp? | () => void |
Callback that is run when a pointing device button is released while the pointer is inside the element button or link. |
| to? | string |
Destination URL to link to. If this value is set, If this value is set, the component will render an <a> tag. |
| blockAlignment? | "start" | "center" | "end" | ConditionalStyle< |
Position children along the cross axis |
| inlineAlignment? | InlineAlignment | ConditionalStyle< |
Position children along the main axis |
| border? | MaybeShorthandProperty< |
Adjust the border style. To shorten the code, it is possible to specify all the border style properties in one property. For example: - base means blockStart, inlineEnd, blockEnd and inlineStart border styles are base- ['base', 'none'] means blockStart and blockEnd border styles are base, inlineStart and inlineEnd border styles are none- ['base', 'none', 'dotted', 'base'] means blockStart border style is base, inlineEnd border style is none, blockEnd border style is dotted and blockStart border style is base |
| borderWidth? | MaybeShorthandProperty< |
Adjust the border width. To shorten the code, it is possible to specify all the border width properties in one property. For example: - base means blockStart, inlineEnd, blockEnd and inlineStart border widths are base- ['base', 'medium'] means blockStart and blockEnd border widths are base, inlineStart and inlineEnd border widths are medium- ['base', 'medium', 'medium', 'base'] means blockStart border width is base, inlineEnd border width is medium, blockEnd border width is medium and blockStart border width is base |
| borderRadius? | MaybeShorthandProperty< |
Adjust the border radius. To shorten the code, it is possible to specify all the border width properties in one property. For example: - base means blockStart, inlineEnd, blockEnd and inlineStart border radii are base- ['base', 'none'] means blockStart and blockEnd border radii are base, inlineStart and inlineEnd border radii are none- ['base', 'none', 'tight', 'base'] means blockStart border radius is base, inlineEnd border radius is none, blockEnd border radius is tight and blockStart border radius is base |
| maxBlockSize? | number | `${number}%` | "fill" | ConditionalStyle< |
Adjust the maximum block size.number: size in pixels.`${number}%`: size in percentages.fill: takes all the available space. |
| maxInlineSize? | number | `${number}%` | "fill" | ConditionalStyle< |
Adjust the maximum inline size.number: size in pixels.`${number}%`: size in percentages.fill: takes all the available space. |
| minInlineSize? | number | `${number}%` | "fill" | ConditionalStyle< |
Adjust the minimum inline size.number: size in pixels.`${number}%`: size in percentages.fill: takes all the available space. |
| minBlockSize? | number | `${number}%` | "fill" | ConditionalStyle< |
Adjust the block size.number: size in pixels.`${number}%`: size in percentages.fill: takes all the available space. |
| padding? | MaybeShorthandProperty< |
Adjust the padding. To shorten the code, it is possible to specify all the padding properties in one property. Examples: - base means blockStart, inlineEnd, blockEnd and inlineStart paddings are base- [ base, none] means blockStart and blockEnd paddings are base, inlineStart and inlineEnd paddings are none- [ base, none, loose, tight] means blockStart padding is base, inlineEnd padding is none, blockEnd padding is loose and blockStart padding is tight |
| overlay? | RemoteFragment |
An overlay component to render when the user interacts with the component. |
| opacity? | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 |
Sets the opacity of the View. The opacity will be applied to the background as well as all the children of the View. Use carefully as this could decrease the contrast ratio between the background and foreground elements, resulting in unreadable and inaccessible text. |
Conditional styles
Anchor link to section titled "Conditional styles"Components can have conditional properties, which enable you to set different values when certain conditions are met. The conditions that Shopify currently supports are changes in the viewport sizes and in interactive states such as hover and focus.
Getting started
Anchor link to section titled "Getting started"You'll need the Style helper to help you write conditional styles easily. If you are using vanilla JavaScript, then use the following package:
If you're using React, then use the following package:
Style helper class
Anchor link to section titled "Style helper class"Style is a helper for authoring conditional values for prop styles.
Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.
| Name | Type | Description |
|---|---|---|
| default | (defaultValue: T) => ConditionalStyle< |
Sets an optional defaultValue to use when no other condition is met. |
| when | (conditions: Conditions, value: T) => ConditionalStyle< |
Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied.The when method can be chained together to build more complex styles. |
The following conditions are supported for conditional styles.
Multiple conditions can be set on the same when method.
| Name | Type | Description |
|---|---|---|
| hover? | true |
This condition is met when an element is hovered on with the cursor (mouse pointer). |
| focus? | true |
This condition is met when an element is clicked, tapped on or selected using the Tab key. |
| viewportInlineSize? | {min: "small" | "medium" | "large"} |
This condition is met when the device matches the minimum width. |
This section provides examples of conditions.
Simple condition
Anchor link to section titled "Simple condition"Using simple conditional styling enables you to specify a styling change when a condition is met. In this example, the View’s padding will be loose on hover.
Default style with conditions
Anchor link to section titled "Default style with conditions"Default styling can be combined with specific conditions. In this example, the Grid’s children will be stacked by default and side by side on viewports above the small breakpoint.
Multiple conditions
Anchor link to section titled "Multiple conditions"Conditions can also be combined to accomodate more complex interactions and user interfaces.
In this example, the Grid’s children will have the following characteristics:
- stacked by default
- side by side (
30%and70%) on viewports above thesmallbreakpoint - side by side (
50%and50%) on viewports above thesmallbreakpoint when hovered
"none" | "extraTight" | "tight" | "base" | "loose" | "extraLoose"
BorderRadius
Anchor link to section titled "BorderRadius""base" | "tight" | "loose" | "fullyRounded" | "none"
BorderWidth
Anchor link to section titled "BorderWidth"MaybeShorthandProperty
Anchor link to section titled "MaybeShorthandProperty"T | ShorthandProperty<
ShorthandProperty
Anchor link to section titled "ShorthandProperty"BorderStyle
Anchor link to section titled "BorderStyle"InlineAlignment
Anchor link to section titled "InlineAlignment""start" | "center" | "end"