Choose a version:

Pressable

Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.

Anchor to pressablepropsPressableProps

accessibilityLabel

string

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or label supplied will not be announced to screen readers.

accessibilityRole

Default: 'generic'

Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

blockSize

number | `${number}%`

Adjust the block size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

display

'auto' | 'none'

Default: 'auto'

The display property sets the display behavior of an element.

href

string

The URL to link to. If set, it will navigate to the location specified by href after executing the onClick callback.

string

A unique identifier for the link.

inlineSize

number | `${number}%`

Adjust the inline size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

lang

string

Alias for language

language

string

Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)

maxBlockSize

number | `${number}%`

Adjust the maximum block size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

maxInlineSize

number | `${number}%`

Adjust the maximum inline size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

minBlockSize

number | `${number}%`

Adjust the minimum block size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

minInlineSize

number | `${number}%`

Adjust the minimum inline size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

onClick

() => void

Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

onPress

() => void

Alias for onClick Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

padding

< | boolean>

Adjust the padding.

To shorten the code, it is possible to specify all the padding for all edges of the box in one property.

base means block-start, inline-end, block-end and inline-start paddings are base.
base none means block-start and block-end paddings are base, inline-start and inline-end paddings are none.
base none large means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is none.
base none large small means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is small.
true applies a default padding that is appropriate for the component.

Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box

paddingBlock

< | boolean>

Adjust the block-padding.

base none means block-start padding is base, block-end padding is none.

paddingBlockEnd

| boolean

Adjust the block-end padding.

paddingBlockStart

| boolean

Adjust the block-start padding.

paddingInline

< | boolean>

Adjust the inline padding.

base none means inline-start padding is base, inline-end padding is none.

paddingInlineEnd

| boolean

Adjust the inline-end padding.

paddingInlineStart

| boolean

Adjust the inline-start padding.

target

'_blank' | '_self'

Default: '_self'

Specifies where to display the linked URL

string

Alias for href If set, it will navigate to the location specified by to after executing the onClick callback.

tone

'default' | 'inherit' | 'critical'

Sets the link color.

inherit will take the color value from its parent, giving the link a monochrome appearance. In some cases, its important to pair this property with another stylistic treatment, like an underline, to differentiate the link from a normal text.

Was this section helpful?