Pressable

A pressable is a primitive for building custom buttons.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

Pressable also supports all valid HTMLButtonElement props, except for disabled which is replaced by the isDisabled prop.

`analyticsContext`
Description	Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
Type	`{ [x: string]: any; }`

`componentName`
Description	An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
Type	`string`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`interactionName`
Description	An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see React UFO integration into Design System components.
Type	`string`

`isDisabled`
Description	Whether the button is disabled.
Type	`boolean`

`onClick`
Description	Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the 'analytics-next' package documentation for more information.
Type	`(e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void`

`ref`
Description	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
Type	`string \| Ref<HTMLButtonElement>`

`style`
Description	No description.
Type	`CSSProperties`

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`xcss`
Description	Apply a subset of permitted styles powered by Atlassian Design System design tokens.
Type	`false \| (XCSSValue<"appearance" \| "color" \| "maxWidth" \| "grid" \| "borderColor" \| "clipPath" \| "filter" \| "marker" \| "mask" \| "height" \| "width" \| "translate" \| "content" \| "border" \| ... 487 more ... \| "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.