Pressable
A layout container that the user can click or press with Enter or Space. It sends its onClick event, or opens href. A control inside it sends only its own event.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
disabled | boolean | |
hoverBackground | string | |
href | string | Opens this URL in a new tab on click, instead of onClick |
tooltip | string | Shown on hover |
ariaPressed | boolean | For a toggle |
insetBorder | boolean | A 1px border inside the box |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.onClick· Sent when the user clicks or presses the container.