Clickable

The clickable component wraps content to make it interactive and clickable. Use it when you need more styling control than button or link provide, such as custom backgrounds, padding, or borders around your clickable content.

Clickable supports button, link, and submit modes with built-in accessibility properties for keyboard navigation and screen reader support.

Anchor to PropertiesProperties

Configure the following properties on the clickable component.

Anchor to disabled disabled boolean required: Whether the component is disabled, preventing clicks and focus. When disabled, the click event won't fire and click events from child elements stop propagating immediately. Interactive child elements can still receive focus and be interacted with. This doesn't apply visual styling by default. You shouldapply disabled styling as needed.
Anchor to loading loading boolean required: Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction.
Anchor to target target "auto" | | "_blank" | "_self" | "_parent" | "_top" Default: 'auto' required: The browsing context where the linked URL should be displayed.

auto: The target is automatically determined based on the origin of the URL.

_blank: Opens the URL in a new window or tab.

_self: Opens the URL in the same browsing context as the current one.

_parent: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as _self.

_top: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as _self.
Anchor to href href string required: The URL to navigate to when clicked. The click event fires first, then navigation occurs. If commandFor is also set, the command executes instead of navigation.
Anchor to download download string required: Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.

The filename suggestion is only respected for same-origin URLs, blob:, and data: schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.

Learn more about the download attribute.
Anchor to type type "button" | "reset" | "submit" Default: 'button' required: The behavior of the button component.

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).

submit: Used to indicate the component acts as a submit button, meaning it submits the closest form.

This property is ignored if the component supports href or commandFor/command and one of them is set.
Anchor to accessibilityRole accessibilityRole Default: 'generic' required: 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 background background Default: 'transparent' required: The background color of the component.
Anchor to blockSize blockSize Default: 'auto' required: The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).

Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions.

Learn more about block-size.
Anchor to minBlockSize minBlockSize Default: '0' required: The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.

Learn more about min-block-size.
Anchor to maxBlockSize maxBlockSize Default: 'none' required: The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.

Learn more about max-block-size.
Anchor to inlineSize inlineSize Default: 'auto' required: The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about inline-size.
Anchor to minInlineSize minInlineSize Default: '0' required: The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.

Learn more about min-inline-size.
Anchor to maxInlineSize maxInlineSize Default: 'none' required: The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.

Learn more about max-inline-size.
Anchor to overflow overflow "visible" | "hidden" Default: 'visible' required: The overflow behavior of the element.

visible: the content that extends beyond the element’s container is visible.

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.
Anchor to padding padding <<>> Default: 'none' required: The padding applied to all edges of the component.

Supports 1-to-4-value syntax using flow-relative values:

1 value applies to all sides

2 values apply to block (top/bottom) and inline (left/right)

3 values apply to block-start (top), inline (left/right), and block-end (bottom)

4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)

Examples: base, large none, base large-100 base small

Use auto to inherit padding from the nearest container with removed padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlock paddingBlock <"" | <>> Default: '' - meaning no override required: The block-direction padding (top and bottom in horizontal writing modes).

Accepts a single value for both sides or two space-separated values for block-start and block-end.

Example: large none applies large to the top and none to the bottom.

Overrides the block value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlockStart paddingBlockStart <"" | > Default: '' - meaning no override required: The block-start padding (top in horizontal writing modes).

Overrides the block-start value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlockEnd paddingBlockEnd <"" | > Default: '' - meaning no override required: The block-end padding (bottom in horizontal writing modes).

Overrides the block-end value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInline paddingInline <"" | <>> Default: '' - meaning no override required: The inline-direction padding (left and right in horizontal writing modes).

Accepts a single value for both sides or two space-separated values for inline-start and inline-end.

Example: large none applies large to the left and none to the right.

Overrides the inline value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInlineStart paddingInlineStart <"" | > Default: '' - meaning no override required: The inline-start padding (left in LTR writing modes, right in RTL).

Overrides the inline-start value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInlineEnd paddingInlineEnd <"" | > Default: '' - meaning no override required: The inline-end padding (right in LTR writing modes, left in RTL).

Overrides the inline-end value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to border border Default: 'none' - equivalent to `none base auto`. required: A border applied using shorthand syntax to specify width, color, and style in a single property.
Anchor to borderWidth borderWidth "" | <"small" | "small-100" | "base" | "large" | "large-100" | "none"> Default: '' - meaning no override required: The thickness of the border on all sides. When set, this overrides the width value specified in the border property.
Anchor to borderStyle borderStyle "" | <> Default: '' - meaning no override required: The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the border property.
Anchor to borderColor borderColor "" | Default: '' - meaning no override required: The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property.
Anchor to borderRadius borderRadius <> Default: 'none' required: The roundedness of the element's corners using the design system's radius scale.
Anchor to accessibilityLabel accessibilityLabel string required: A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
Anchor to accessibilityVisibility accessibilityVisibility "visible" | "hidden" | "exclusive" Default: 'visible' required: The visibility mode of the element for both visual and assistive technology users.

visible: The element is visible to all users (both sighted users and screen readers).

hidden: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.

exclusive: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
Anchor to display display <"auto" | "none"> Default: 'auto' required: 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 command command '--auto' | '--show' | '--hide' | '--toggle' Default: '--auto' required: The action that command should take when this component is activated.

--auto: A default action for the target component.

--show: Shows the target component.

--hide: Hides the target component.

--toggle: Toggles the visibility of the target component.
Anchor to commandFor commandFor string required: The component that commandFor should act on when this component is activated.
Anchor to interestFor interestFor string required: The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.

AnyString

A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.

string & {}

AccessibilityRole

Defines the semantic role of a component for assistive technologies like screen readers. Accessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation. Use these roles to: - Improve navigation for screen reader users - Provide semantic structure to your UI - Ensure proper interpretation by assistive technologies Learn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs. - `main`: Indicates the primary content area of the page. - `header`: Marks a component as a header containing introductory content or navigation. - `footer`: Designates content containing information like copyright, navigation links, or privacy statements. - `section`: Defines a generic thematic grouping of content that should have a heading or accessible label. - `aside`: Marks supporting content that relates to but is separate from the main content. - `navigation`: Identifies major groups of navigation links for moving around the site or page. - `ordered-list`: Represents a list where the order of items is meaningful. - `list-item`: Identifies an individual item within a list. - `list-item-separator`: Acts as a visual and semantic divider between items in a list. - `unordered-list`: Represents a list where the order of items is not meaningful. - `separator`: Creates a divider that separates and distinguishes sections of content. - `status`: Defines a live region for advisory information that is not urgent enough to be an alert. - `alert`: Marks important, time-sensitive information that requires the user's immediate attention. - `generic`: Creates a semantically neutral container element with no inherent meaning. - `presentation`: Removes semantic meaning from an element while preserving its visual appearance. - `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.

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

BackgroundColorKeyword

Defines the background color intensity or emphasis level for UI elements. - `transparent`: No background, allowing the underlying surface to show through. - `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.

'transparent' | ColorKeyword

ColorKeyword

Defines the color intensity or emphasis level for text and UI elements. - `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements. - `base`: Primary color for body text, standard UI elements, and general content with good readability. - `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.

'subdued' | 'base' | 'strong'

SizeUnitsOrAuto

Represents size values that can also be set to `auto` for automatic sizing. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.

SizeUnits | 'auto'

SizeUnits

Represents size values in pixels, percentages, or zero. - `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`). - `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`). - `0`: Zero size, equivalent to no dimension.

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

SizeUnitsOrNone

Represents size values that can also be set to `none` to remove the size constraint. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `none`: No size constraint, allowing unlimited growth.

SizeUnits | 'none'

MaybeResponsive

Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string. - `T`: Base value that applies in all conditions. - `@container${string}`: Container query string for conditional responsive styling based on container size.

T | `@container${string}`

MaybeAllValuesShorthandProperty

Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left. - `T`: Single value that applies to all four sides. - `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right). - `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom). - `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).

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

PaddingKeyword

Defines the padding size for elements, using the standard size scale or `none` for no padding. - `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing. - `none`: No padding.

SizeKeyword | 'none'

SizeKeyword

Defines component sizes using a consistent scale from extra small to extra large. - `small-500` through `small-100`: Extra small to small sizes, progressively increasing. - `small`: Standard small size. - `base`: Default medium size that works well in most contexts. - `large`: Standard large size. - `large-100` through `large-500`: Large to extra large sizes, progressively increasing.

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

MaybeTwoValuesShorthandProperty

Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values. - `T`: Single value that applies to both dimensions. - `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).

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

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

Defines the width of borders, using the standard size scale or `none` for no border. - `SizeKeyword`: Standard border widths from the size scale for consistent thickness. - `none`: No border width (removes the border).

SizeKeyword | 'none'

BorderStyleKeyword

Defines the visual style of borders. - `none`: No border is displayed. - `solid`: A single solid line. - `dashed`: A series of short dashes. - `dotted`: A series of dots. - `auto`: Automatically determined based on context.

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

BoxBorderStyles

Represents the subset of border style values supported by the box component. - `auto`: Default border style determined by the system. - `none`: No border style (removes the border). - `solid`: Continuous line border. - `dashed`: Border made up of dashes.

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

BoxBorderRadii

Represents the subset of border radius values supported by the component. - `small-200`: Extra small radius for subtle rounding. - `small-100`: Small radius for minimal corner rounding. - `small`: Standard small radius. - `base`: Medium radius for moderate corner rounding. - `large`: Standard large radius for pronounced rounding. - `large-100`: Large radius for more prominent corner rounding. - `large-200`: Extra large radius for maximum rounding. - `none`: No border radius (sharp corners).

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

Anchor to EventsEvents

The clickable component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur blur <typeof tagName> | null required: A callback fired when the component loses focus.

Learn more about the blur event.
Anchor to click click <typeof tagName> | null required: A callback fired when the component is clicked.

Learn more about the click event.
Anchor to focus focus <typeof tagName> | null required: A callback fired when the component receives focus.

Learn more about the focus event.

CallbackEventListener

A function that handles events from UI components. This type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event. This type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}

Anchor to SlotsSlots

The clickable component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to children children HTMLElement: The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link.

Anchor to ExamplesExamples

Anchor to Create a custom interactive elementCreate a custom interactive element

Build custom interactive elements with flexible styling that button or link don't support. This example shows two clickable elements with different background and border styles.

Preview

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 Navigate to a URLNavigate to a URL

Set the href property to make a clickable element navigate like a link. This example shows a clickable component that opens a URL in a new browser tab.

Preview

html

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

Visit Shopify

</s-clickable>

Anchor to Create a form submit buttonCreate a form submit button

Use a clickable component as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable component with a border and padding.

Preview

html

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

Save changes

</s-clickable>

Anchor to Add a clickable action to a sectionAdd a clickable action to a section

Add a clickable button alongside descriptive content in a section. This example shows a styled clickable button inside a box with a heading and description.

Preview

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>

Anchor to Add an accessibility labelAdd an accessibility label

Add an accessibility label to provide screen readers with more context than the visible text alone. This example shows a clickable delete button with a descriptive label for assistive technologies.

Preview

html

<s-clickable

accessibilityLabel="Delete product winter collection jacket"

background="base"

padding="base"

borderRadius="small"

<s-text>Delete</s-text>

</s-clickable>

Anchor to Describe a disabled link with an accessibility labelDescribe a disabled link with an accessibility label

Disable a clickable link while providing an accessibility label that explains why the feature is unavailable. This example shows a disabled navigation element with a descriptive label for screen readers.

Preview

html

<s-clickable

href="javascript:void(0)"

disabled

accessibilityLabel="This link is currently unavailable"

<s-text>Unavailable feature</s-text>

</s-clickable>

Anchor to Best practicesBest practices

Provide accessibility labels: Always include accessibilityLabel for elements without visible text to ensure screen reader users understand the element's purpose.
Choose appropriate modes: Use button mode for triggering actions, link mode for navigation, and submit mode for form submissions.
Indicate disabled state: When disabling clickable elements, provide clear visual feedback and explanatory text about why the element's unavailable.

Was this page helpful?