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.

Anchor to propertiesProperties

Anchor to accessibilityLabel 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.
Anchor to accessibilityRole 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.
Anchor to accessibilityVisibility 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.
Anchor to background background Default: 'transparent': Adjust the background of the component.
Anchor to blockSize blockSize Default: 'auto': Adjust the block size.
Anchor to border border 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.
Anchor to borderColor borderColor "" | Default: '' - meaning no override: Adjust the color of the border.
Anchor to borderRadius borderRadius <> Default: 'none': Adjust the radius of the border.
Anchor to borderStyle borderStyle "" | <> Default: '' - meaning no override: Adjust the style of the border.
Anchor to borderWidth borderWidth "" | <"small" | "small-100" | "base" | "large" | "large-100" | "none"> Default: '' - meaning no override: Adjust the width of the border.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' Default: '--auto': Sets the action the command 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.
Anchor to commandFor commandFor string: Sets the element the commandFor should act on when this clickable is activated.
Anchor to disabled disabled boolean: 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.
Anchor to display display <"auto" | "none"> Default: 'auto': Sets the outer display type of the component. The outer type sets a component's participation in 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.
Anchor to download download string: Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the blob: and data: schemes.
Anchor to href 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.
Anchor to inlineSize inlineSize Default: 'auto': Adjust the inline size.
Anchor to interestFor interestFor string: Sets the element the interestFor should act on when this clickable is activated.
Anchor to loading loading boolean: Disables the clickable, and indicates to assistive technology that the loading is in progress.

This also disables the clickable.
Anchor to maxBlockSize maxBlockSize Default: 'none': Adjust the maximum block size.
Anchor to maxInlineSize maxInlineSize Default: 'none': Adjust the maximum inline size.
Anchor to minBlockSize minBlockSize Default: '0': Adjust the minimum block size.
Anchor to minInlineSize minInlineSize Default: '0': Adjust the minimum inline size.
Anchor to overflow overflow "visible" | "hidden" 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.
Anchor to padding padding <<>> Default: 'none': Adjust the padding of all edges.

1-to-4-value syntax 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.

padding also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlock paddingBlock <"" | <>> 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.

paddingBlock also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlockEnd paddingBlockEnd <"" | > Default: '' - meaning no override: Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

paddingBlockEnd also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlockStart paddingBlockStart <"" | > Default: '' - meaning no override: Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

paddingBlockStart also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInline paddingInline <"" | <>> 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.

paddingInline also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInlineEnd paddingInlineEnd <"" | > Default: '' - meaning no override: Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

paddingInlineEnd also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInlineStart paddingInlineStart <"" | > Default: '' - meaning no override: Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

paddingInlineStart also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to target target "auto" | | "_blank" | "_self" | "_parent" | "_top" Default: 'auto': Specifies where to display the linked URL.
Anchor to type type "button" | "reset" | "submit" 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.

AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'

BackgroundColorKeyword

'transparent' | ColorKeyword

ColorKeyword

'subdued' | 'base' | 'strong'

SizeUnitsOrAuto

SizeUnits | 'auto'

SizeUnits

`${number}px` | `${number}%` | `0`

BorderShorthand

Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.

BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`

BorderSizeKeyword

SizeKeyword | 'none'

SizeKeyword

'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'

BorderStyleKeyword

'none' | 'solid' | 'dashed' | 'dotted' | 'auto'

MaybeAllValuesShorthandProperty

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`

BoxBorderRadii

'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'

BoxBorderStyles

'auto' | 'none' | 'solid' | 'dashed'

MaybeResponsive

T | `@container${string}`

SizeUnitsOrNone

SizeUnits | 'none'

PaddingKeyword

SizeKeyword | 'none'

MaybeTwoValuesShorthandProperty

T | `${T} ${T}`

AnyString

Prevents widening string literal types in a union to `string`.

string & {}

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to blur blur <typeof tagName> | null
Anchor to click click <typeof tagName> | null
Anchor to focus focus <typeof tagName> | null

Was this section helpful?

Anchor to slotsSlots

Anchor to children children HTMLElement: The content of the Clickable.

Was this section helpful?

Code

<s-clickable padding="base">Create Store</s-clickable>

<s-clickable

border="base"

padding="base"

background="subdued"

borderRadius="base"

View Shipping Settings

</s-clickable>

</>

Examples

Code

jsx

<>
  <s-clickable padding="base">Create Store</s-clickable>

  <s-clickable
    border="base"
    padding="base"
    background="subdued"
    borderRadius="base"
  >
    View Shipping Settings
  </s-clickable>
</>

html

<s-clickable padding="base">Create Store</s-clickable>

<s-clickable
  border="base"
  padding="base"
  background="subdued"
  borderRadius="base"
>
  View Shipping Settings
</s-clickable>

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Anchor to example-basic-button-usageBasic Button Usage

A simple clickable button with a base border and padding, demonstrating the default button behavior of the Clickable component.

Anchor to example-link-modeLink Mode

Demonstrates the Clickable component's ability to function as a link, opening the specified URL in a new browser tab when clicked.

Anchor to example-form-submit-buttonForm Submit Button

A disabled submit button that can be used within a form, showing the component's form integration capabilities and disabled state.

Anchor to example-section-with-clickable-actionSection with Clickable Action

Illustrates how the Clickable component can be integrated into a section layout to provide an interactive action button.

Anchor to example-accessibility-with-aria-attributesAccessibility with ARIA Attributes

Demonstrates the use of an accessibility label to provide context for screen readers, enhancing the component's usability for users with assistive technologies.

Anchor to example-disabled-link-with-ariaDisabled Link with ARIA

Shows a disabled link with an accessibility label, explaining the unavailability of a feature to users of assistive technologies.

Was this section helpful?

Basic Button Usage

<s-clickable border="base" padding="base">

Click me

</s-clickable>

Examples

Basic Button Usage
Description
A simple clickable button with a base border and padding, demonstrating the default button behavior of the Clickable component.
jsx
```
<s-clickable border="base" padding="base">
  Click me
</s-clickable>
```
html
```
<s-clickable border="base" padding="base">Click me</s-clickable>
```

Link Mode

Description

Demonstrates the Clickable component's ability to function as a link, opening the specified URL in a new browser tab when clicked.

jsx

<s-clickable href="javascript:void(0)" target="_blank">
  Visit Shopify
</s-clickable>

html

<s-clickable href="javascript:void(0)" target="_blank">
  Visit Shopify
</s-clickable>

Form Submit Button

Description

A disabled submit button that can be used within a form, showing the component's form integration capabilities and disabled state.

jsx

<s-clickable type="submit" disabled border="base" padding="base">
  Save changes
</s-clickable>

html

<s-clickable type="submit" disabled border="base" padding="base">
  Save changes
</s-clickable>

Section with Clickable Action

Description

Illustrates how the Clickable component can be integrated into a section layout to provide an interactive action button.

jsx

<s-box padding="large-400" background="base" borderRadius="small-200">
  <s-stack gap="large-300">
    <s-heading>Product settings</s-heading>
    <s-text>Configure your product inventory and pricing settings.</s-text>
    <s-clickable background="base" padding="base" borderRadius="small">
      <s-text type="strong">Configure settings</s-text>
    </s-clickable>
  </s-stack>
</s-box>

html

<s-box padding="large-400" background="base" borderRadius="small-200">
  <s-stack gap="large-300">
    <s-heading>Product settings</s-heading>
    <s-text>Configure your product inventory and pricing settings.</s-text>
    <s-clickable background="base" padding="base" borderRadius="small">
      <s-text type="strong">Configure settings</s-text>
    </s-clickable>
  </s-stack>
</s-box>

Accessibility with ARIA Attributes

Description

Demonstrates the use of an accessibility label to provide context for screen readers, enhancing the component's usability for users with assistive technologies.

jsx

<s-clickable
  accessibilityLabel="Delete product winter collection jacket"
  background="base"
  padding="base"
  borderRadius="small"
>
  <s-text>Delete</s-text>
</s-clickable>

html

<s-clickable
  accessibilityLabel="Delete product winter collection jacket"
  background="base"
  padding="base"
  borderRadius="small"
>
  <s-text>Delete</s-text>
</s-clickable>

Disabled Link with ARIA

Description

Shows a disabled link with an accessibility label, explaining the unavailability of a feature to users of assistive technologies.

jsx

<s-clickable
  href="javascript:void(0)"
  disabled
  accessibilityLabel="This link is currently unavailable"
>
  <s-text>Unavailable feature</s-text>
</s-clickable>

html

<s-clickable
  href="javascript:void(0)"
  disabled
  accessibilityLabel="This link is currently unavailable"
>
  <s-text>Unavailable feature</s-text>
</s-clickable>

Clickable

Anchor to propertiesProperties

AccessibilityRole

BackgroundColorKeyword

ColorKeyword

SizeUnitsOrAuto

SizeUnits

BorderShorthand

BorderSizeKeyword

SizeKeyword

BorderStyleKeyword

MaybeAllValuesShorthandProperty

BoxBorderRadii

BoxBorderStyles

MaybeResponsive

SizeUnitsOrNone

PaddingKeyword

MaybeTwoValuesShorthandProperty

AnyString

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Anchor to slotsSlots

Examples

Code

jsx

html

Anchor to examplesExamples

Anchor to example-basic-usageBasic usage

Examples

Basic Button Usage

Description

jsx

html

Link Mode

Description

jsx

html

Form Submit Button

Description

jsx

html

Section with Clickable Action

Description

jsx

html

Accessibility with ARIA Attributes

Description

jsx

html

Disabled Link with ARIA

Description

jsx

html