--- title: Clickable description: A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link. Use it to apply specific styling such as backgrounds, padding, or borders. api_version: 2025-10 api_name: checkout-ui-extensions source_url: html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/actions/clickable md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/actions/clickable.md --- # Clickable A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link. Use it to apply specific styling such as backgrounds, padding, or borders. ## Properties * 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. Only use this when the element's content is not enough context for users using assistive technologies. * accessibilityVisibility 'visible' | 'hidden' | 'exclusive' Default: 'visible' Changes the visibility of the element. * `visible`: the element is visible to all users. * `hidden`: the element is removed from the accessibility tree but remains visible. * `exclusive`: the element is visually hidden but remains in the accessibility tree. * background 'base' | 'subdued' | 'transparent' Default: 'transparent' Adjust the background of the element. * blockSize MaybeResponsive\ Default: 'auto' Adjust the block size. * border BorderShorthand Default: 'none' - equivalent to \`none base auto\`. Set the border via the shorthand property. This can be a size, optionally followed by a color, optionally followed by a style. If the color is not specified, it will be `base`. If the style is not specified, it will be `auto`. Values can be overridden by `borderWidth`, `borderStyle`, and `borderColor`. * borderRadius MaybeAllValuesShorthandProperty\> Default: 'none' Set the radius of the border. [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: * 4 values: `start-start start-end end-end end-start` * 3 values: `start-start (start-end & end-start) start-end` * 2 values: `(start-start & end-end) (start-end & end-start)` For example: * `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`. * `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`. * `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`. * `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`. * borderStyle MaybeAllValuesShorthandProperty\ | "" Default: '' - meaning no override Set the style of the border. If set, it takes precedence over the `border` property's style. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively. * borderWidth MaybeAllValuesShorthandProperty\ | '' Default: '' - meaning no override Set the width of the border. If set, it takes precedence over the `border` property's width. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively. * command '--auto' | '--show' | '--hide' | '--toggle' | '--copy' Default: '--auto' Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. * `--auto`: a default action for the target component. * `--show`: shows the target component. * `--hide`: hides the target component. * `--toggle`: toggles the target component. * `--copy`: copies the target ClipboardItem. * commandFor string ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target. * disabled boolean Default: false Disables the clickable, meaning it cannot be clicked or receive focus. In this state, onClick will not fire. If the click event originates from a child element, the event will immediately stop propagating from this element. However, items within the clickable can still receive focus and be interacted with. This has no impact on the visual state by default, but developers are encouraged to style the clickable accordingly. * display MaybeResponsive<"auto" | "none"> Default: 'auto' Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). * `auto`: the component’s initial value. The actual value depends on the component and context. * `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers. * href string The URL to link to. * If set, it will navigate to the location specified by `href` after executing the `click` event. * If a `commandFor` is set, the `command` will be executed instead of the navigation. * id string A unique identifier for the element. * inlineSize MaybeResponsive\ Default: 'auto' Adjust the inline size. * interestFor string ID of a component that should respond to interest (e.g. hover and focus) on this component. * lang string Default: '' 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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) * loading boolean Default: false Disables the clickable, and indicates to assistive technology that the loading is in progress. This also disables the clickable. * maxBlockSize MaybeResponsive\ Default: 'none' Adjust the maximum block size. * maxInlineSize MaybeResponsive\ Default: 'none' Adjust the maximum inline size. * minBlockSize MaybeResponsive\ Default: '0' Adjust the minimum block size. * minInlineSize MaybeResponsive\ Default: '0' Adjust the minimum inline size. * overflow 'hidden' | 'visible' Default: 'visible' Sets the overflow behavior of the element. * `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. * `visible`: the content that extends beyond the element’s container is visible. * padding MaybeResponsive\> Default: 'none' Adjust the padding of all edges. [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: * 4 values: `block-start inline-end block-end inline-start` * 3 values: `block-start inline block-end` * 2 values: `block inline` For example: * `large` means block-start, inline-end, block-end and inline-start paddings are `large`. * `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`. * `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`. * `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`. A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed. * paddingBlock MaybeResponsive\ | ""> Default: '' - meaning no override Adjust the block-padding. * `large none` means block-start padding is `large`, block-end padding is `none`. This overrides the block value of `padding`. * paddingBlockEnd MaybeResponsive\ Default: '' - meaning no override Adjust the block-end padding. This overrides the block-end value of `paddingBlock`. * paddingBlockStart MaybeResponsive\ Default: '' - meaning no override Adjust the block-start padding. This overrides the block-start value of `paddingBlock`. * paddingInline MaybeResponsive\ | ""> Default: '' - meaning no override Adjust the inline padding. * `large none` means inline-start padding is `large`, inline-end padding is `none`. This overrides the inline value of `padding`. * paddingInlineEnd MaybeResponsive\ Default: '' - meaning no override Adjust the inline-end padding. This overrides the inline-end value of `paddingInline`. * paddingInlineStart MaybeResponsive\ Default: '' - meaning no override Adjust the inline-start padding. This overrides the inline-start value of `paddingInline`. * target 'auto' | '\_blank' Default: 'auto' Specifies where to display the linked URL. * type 'submit' | 'button' Default: 'button' The behavior of the Button. * `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form. * `button`: Used to indicate the component acts as a button, meaning it has no default action. * `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set. ### MaybeResponsive ```ts T | `@container${string}` ``` ### SizeUnitsOrAuto ```ts SizeUnits | "auto" ``` ### SizeUnits ```ts `${number}px` | `${number}%` | `0` ``` ### BorderShorthand ```ts ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}` ``` ### ReducedBorderSizeKeyword ```ts 'large' | 'base' | 'large-100' | 'large-200' | 'none' ``` ### ReducedColorKeyword ```ts 'base' ``` ### BorderStyleKeyword ```ts "none" | "solid" | "dashed" | "dotted" | "auto" ``` ### MaybeAllValuesShorthandProperty ```ts T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}` ``` ### ClickableProps * accessibilityLabel 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. Only use this when the element's content is not enough context for users using assistive technologies. ```ts string ``` * accessibilityVisibility Changes the visibility of the element. - \`visible\`: the element is visible to all users. - \`hidden\`: the element is removed from the accessibility tree but remains visible. - \`exclusive\`: the element is visually hidden but remains in the accessibility tree. ```ts 'visible' | 'hidden' | 'exclusive' ``` * background Adjust the background of the element. ```ts 'base' | 'subdued' | 'transparent' ``` * blockSize Adjust the block size. ```ts MaybeResponsive ``` * border Set the border via the shorthand property. This can be a size, optionally followed by a color, optionally followed by a style. If the color is not specified, it will be \`base\`. If the style is not specified, it will be \`auto\`. Values can be overridden by \`borderWidth\`, \`borderStyle\`, and \`borderColor\`. ```ts BorderShorthand ``` * borderRadius Set the radius of the border. \[1-to-4-value syntax]\(https\://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: - 4 values: \`start-start start-end end-end end-start\` - 3 values: \`start-start (start-end & end-start) start-end\` - 2 values: \`(start-start & end-end) (start-end & end-start)\` For example: - \`small-100\` means start-start, start-end, end-end and end-start border radii are \`small-100\`. - \`small-100 none\` means start-start and end-end border radii are \`small-100\`, start-end and end-start border radii are \`none\`. - \`small-100 none large-100\` means start-start border radius is \`small-100\`, start-end border radius is \`none\`, end-end border radius is \`large-100\` and end-start border radius is \`none\`. - \`small-100 none large-100 small-100\` means start-start border radius is \`small-100\`, start-end border radius is \`none\`, end-end border radius is \`large-100\` and end-start border radius is \`small-100\`. ```ts MaybeAllValuesShorthandProperty> ``` * borderStyle Set the style of the border. If set, it takes precedence over the \`border\` property's style. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively. ```ts MaybeAllValuesShorthandProperty | "" ``` * borderWidth Set the width of the border. If set, it takes precedence over the \`border\` property's width. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively. ```ts MaybeAllValuesShorthandProperty | '' ``` * command Sets the action the \`commandFor\` should take when this clickable is activated. See the documentation of particular components for the actions they support. - \`--auto\`: a default action for the target component. - \`--show\`: shows the target component. - \`--hide\`: hides the target component. - \`--toggle\`: toggles the target component. - \`--copy\`: copies the target ClipboardItem. ```ts '--auto' | '--show' | '--hide' | '--toggle' | '--copy' ``` * commandFor ID of a component that should respond to activations (e.g. clicks) on this component. See \`command\` for how to control the behavior of the target. ```ts string ``` * disabled Disables the clickable, meaning it cannot be clicked or receive focus. In this state, onClick will not fire. If the click event originates from a child element, the event will immediately stop propagating from this element. However, items within the clickable can still receive focus and be interacted with. This has no impact on the visual state by default, but developers are encouraged to style the clickable accordingly. ```ts boolean ``` * display Sets the outer display type of the component. The outer type sets a component’s participation in \[flow layout]\(https\://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_flow\_layout). - \`auto\`: the component’s initial value. The actual value depends on the component and context. - \`none\`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers. ```ts MaybeResponsive<"auto" | "none"> ``` * href The URL to link to. - If set, it will navigate to the location specified by \`href\` after executing the \`click\` event. - If a \`commandFor\` is set, the \`command\` will be executed instead of the navigation. ```ts string ``` * id A unique identifier for the element. ```ts string ``` * inlineSize Adjust the inline size. ```ts MaybeResponsive ``` * interestFor ID of a component that should respond to interest (e.g. hover and focus) on this component. ```ts string ``` * lang 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]\(https\://www\.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) ```ts string ``` * loading Disables the clickable, and indicates to assistive technology that the loading is in progress. This also disables the clickable. ```ts boolean ``` * maxBlockSize Adjust the maximum block size. ```ts MaybeResponsive ``` * maxInlineSize Adjust the maximum inline size. ```ts MaybeResponsive ``` * minBlockSize Adjust the minimum block size. ```ts MaybeResponsive ``` * minInlineSize Adjust the minimum inline size. ```ts MaybeResponsive ``` * onBlur Callback when the element loses focus. ```ts (event: FocusEvent) => void ``` * onClick Callback when the Button is activated. This will be called before the action indicated by \`type\`. ```ts (event: Event) => void ``` * onFocus Callback when the element receives focus. ```ts (event: FocusEvent) => void ``` * overflow Sets the overflow behavior of the element. - \`hidden\`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - \`visible\`: the content that extends beyond the element’s container is visible. ```ts 'hidden' | 'visible' ``` * padding Adjust the padding of all edges. \[1-to-4-value syntax]\(https\://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: - 4 values: \`block-start inline-end block-end inline-start\` - 3 values: \`block-start inline block-end\` - 2 values: \`block inline\` For example: - \`large\` means block-start, inline-end, block-end and inline-start paddings are \`large\`. - \`large none\` means block-start and block-end paddings are \`large\`, inline-start and inline-end paddings are \`none\`. - \`large none large\` means block-start padding is \`large\`, inline-end padding is \`none\`, block-end padding is \`large\` and inline-start padding is \`none\`. - \`large none large small\` means block-start padding is \`large\`, inline-end padding is \`none\`, block-end padding is \`large\` and inline-start padding is \`small\`. A padding value of \`auto\` will use the default padding for the closest container that has had its usual padding removed. ```ts MaybeResponsive> ``` * paddingBlock Adjust the block-padding. - \`large none\` means block-start padding is \`large\`, block-end padding is \`none\`. This overrides the block value of \`padding\`. ```ts MaybeResponsive | ""> ``` * paddingBlockEnd Adjust the block-end padding. This overrides the block-end value of \`paddingBlock\`. ```ts MaybeResponsive ``` * paddingBlockStart Adjust the block-start padding. This overrides the block-start value of \`paddingBlock\`. ```ts MaybeResponsive ``` * paddingInline Adjust the inline padding. - \`large none\` means inline-start padding is \`large\`, inline-end padding is \`none\`. This overrides the inline value of \`padding\`. ```ts MaybeResponsive | ""> ``` * paddingInlineEnd Adjust the inline-end padding. This overrides the inline-end value of \`paddingInline\`. ```ts MaybeResponsive ``` * paddingInlineStart Adjust the inline-start padding. This overrides the inline-start value of \`paddingInline\`. ```ts MaybeResponsive ``` * target Specifies where to display the linked URL. ```ts 'auto' | '_blank' ``` * type The behavior of the Button. - \`submit\`: Used to indicate the component acts as a submit button, meaning it submits the closest form. - \`button\`: Used to indicate the component acts as a button, meaning it has no default action. - \`reset\`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports \`href\` or \`commandFor\`/\`command\` and one of them is set. ```ts 'submit' | 'button' ``` ```ts export interface ClickableProps extends ClickableElementProps, ClickableEvents { } ``` ### SizeUnitsOrNone ```ts SizeUnits | "none" ``` ### PaddingKeyword ```ts SizeKeyword | "none" ``` ### SizeKeyword ```ts "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500" ``` ### MaybeTwoValuesShorthandProperty ```ts T | `${T} ${T}` ``` ## Events * blur ((event: CallbackEventListener\) => void) | null Callback when the element loses focus. * click ((event: CallbackEventListener\) => void) | null Callback when the button is activated. This will be called before the action indicated by `type`. * focus ((event: CallbackEventListener\) => void) | null Callback when the element receives focus. ### CallbackEventListener ```ts (EventListener & { (event: CallbackEvent): void; }) | null ``` ### CallbackEvent ```ts TEvent & { currentTarget: HTMLElementTagNameMap[TTagName]; } ``` ### Examples * #### Code ##### Default ```html ``` ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-default.png)