Invoked when the user clicks SpotlightSecondaryAction. If an onClick handler is provided to SpotlightSecondaryAction then that takes precedence, and back will be ignored.

The content to be rendered in PopoverContent. This is intended to be a SpotlightCard.

Pass ONE element. On the top-layer code path it is rendered into a flex-row host so the viewport cap can reach it, and a fragment's children would become side-by-side flex items. See children on Popover in @atlaskit/top-layer.

Spotlights can be dismissed by:

• Clicking the SpotlightDismissControl
• Clicking any DOM element outside the spotlight (if shouldDismissOnClickOutside === true)
• Pressing the Escape key

These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively. Defaults to true.

Invoked when the user clicks SpotlightPrimaryAction. If an onClick handler is provided to SpotlightPrimaryAction then that takes precedence, and done will be ignored.

If done is passed to PopoverContent, then next cannot be passed. This will result in a type error.

Controls whether or not PopoverContent is visible. Defaults to true.

The motion to be applied to the SpotlightCard.

Invoked when the user clicks SpotlightPrimaryAction in a tour. If an onClick handler is provided to SpotlightPrimaryAction then that takes precedence, and next will be ignored.

If next is passed to PopoverContent, then done cannot be passed. This will result in a type error.

Distance the spotlight should be offset from the target in the format of [along, away] (units in px). Defaults to [0, 2] - which means the spotlight will be 2px away from the edge of the target specified by the placement prop.

The position in relation to the target the content should be shown at.

Controls whether the 'dismiss' action is invoked when the user clicks outside the content. Defaults to true.

Describes the positioning strategy to use. By default, it is fixed, which positions the popper correctly when it's in the normal flow of the document. If your reference element is in an absolute container, like a modal, use the absolute strategy instead.

For more details see: https://popper.js.org/docs/v2/constructors/#strategy

Has no effect when platform-dst-top-layer-spotlight is enabled.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

The to be rendered in PopoverProvider. This is intended to be PopoverContent, and PopoverTarget.

The content to be rendered in PopoverTarget. This is intended to be the element you want to point the spotlight at.

Elements to be rendered inside the SpotlightCard.

The position in relation to the target the content should be shown at. Overrides PopoverContent.placement

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Elements to be rendered inside the SpotlightActions.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Textual content is required for all spotlights. It should be brief and direct to quickly elaborate on the value.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Elements to be rendered inside the SpotlightFooter.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Specifies whether the dismiss button should be focused when the spotlight is rendered. For spotlights that are triggered by user-action, this should be true. In the event that a spotlight is rendered on page load, without explicit user interaction, this should be false.

The action to take when the button is clicked.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Elements to be rendered inside the SpotlightFooter.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Elements to be rendered inside the SpotlightHeader.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

A brief and direct title to clearly communicate the intent.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Media to be displayed. This can be an image, video, gif that helps communicate spotlight intent.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Visual style of the button. Defaults to outline.

An accessible label to read out in the event that the displayed text does not provide enough context.

Text to be rendered inside the SpotlightActions.

The action to take when the button is clicked.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Visual style of the button. Defaults to outline.

An accessible label to read out in the event that the displayed text does not provide enough context.

Text to be rendered inside the link.

The destination URL. Accepts a URL string, or a router config object when using AppProvider's router link.

Handler called when the link is clicked. The second argument provides an Atlaskit UI analytics event when using Anchor.

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}

Rel attribute for the link (e.g. noopener noreferrer for target="_blank").

Target attribute for the link (e.g. _blank).

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

An accessible label to read out in the event that the displayed text does not provide enough context.

Text to be rendered inside the SpotlightActions.

The action to take when the button is clicked.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

An accessible label to read out in the event that the displayed text does not provide enough context.

Text to be rendered inside the link.

The destination URL. Accepts a URL string, or a router config object when using AppProvider's router link.

Handler called when the link is clicked. The second argument provides an Atlaskit UI analytics event when using Anchor.

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}

Rel attribute for the link (e.g. noopener noreferrer for target="_blank").

Target attribute for the link (e.g. _blank).

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

The action to take when the button is clicked.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Elements to be rendered inside the SpotlightStepCount.

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}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests