SClickable <s-clickable>
ts
import { SClickable } from 'polaris-vue-elements'Example
vue
<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'
const clicks = ref(0)
</script>
<template>
<!-- SClickable is a generic, unstyled-by-default interactive container: box
styling props (background, padding, borderRadius, ...) plus a click event. -->
<SClickable
background="subdued"
borderRadius="200"
padding="base"
@click="clicks++"
>
<SText>Clicked {{ clicks }} times</SText>
</SClickable>
</template>Props
| Prop | Type | Description |
|---|---|---|
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. |
accessibilityRole | "generic" | "main" | "header" | "footer" | "section" | "region" | "aside" | "navigation" … (9 more) | 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. |
accessibilityVisibility | "visible" | "hidden" | "exclusive" | 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 | "subdued" | "base" | "strong" | "transparent" | The background color of the component. |
blockSize | "auto" | "0" | 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. |
border | BorderShorthand | A border applied using shorthand syntax to specify width, color, and style in a single property. |
borderColor | "subdued" | "base" | "strong" | The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property. Choose from subdued, base, or strong to match the visual emphasis needed. |
borderRadius | MaybeAllValuesShorthandProperty<BoxBorderRadii> | The roundedness of the element's corners using the design system's radius scale. Supports 1-to-4-value syntax for specifying different radii per corner. Use this to create rounded corners or fully rounded elements. |
borderStyle | "" | MaybeAllValuesShorthandProperty<BoxBorderStyles> | 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. Supports 1-to-4-value syntax for specifying different styles per side. |
borderWidth | "" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none"> | The thickness of the border on all sides. When set, this overrides the width value specified in the border property. Supports 1-to-4-value syntax for specifying different widths per side. |
command | "--auto" | "--show" | "--hide" | "--toggle" | "--copy" | 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 | 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 should apply disabled styling as needed. |
display | "auto" | "none" | 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. |
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. |
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. |
inlineSize | "auto" | "0" | 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. |
interestFor | string | ID of a component that should respond to interest (e.g. hover and focus) on this component. |
lang | string | The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the IANA language subtag registry. |
loading | boolean | Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction. |
maxBlockSize | "none" | "0" | 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. |
maxInlineSize | "none" | "0" | 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. |
minBlockSize | "0" | 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. |
minInlineSize | "0" | 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. |
overflow | "visible" | "hidden" | 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<MaybeAllValuesShorthandProperty<PaddingKeyword>> | 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. |
paddingBlock | MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>> | 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. |
paddingBlockEnd | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more) | 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. |
paddingBlockStart | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more) | 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. |
paddingInline | MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>> | 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. |
paddingInlineEnd | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more) | 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. |
paddingInlineStart | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more) | 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. |
target | "auto" | "_blank" | "_self" | "_parent" | "_top" | Specifies where to display the linked URL. |
type | "button" | "reset" | "submit" | 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. |
Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (
src/lib/generated/types.ts).
Events
| Event | Type |
|---|---|
blur | CustomEvent |
click | CustomEvent |
focus | CustomEvent |
Listen for these with @blur-style listeners on <SClickable>.
Slots
| Slot | Description |
|---|---|
default | The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link. |