| Version | Tag | Status | API |
|---|---|---|---|
| v1 | <oc-action-signifier-v1> |
Stable, allowed for generation | ActionSignifierV1 |
Overview (v1)
Source: ./src/components/action-signifier/v1/Overview.mdx
Action signifier
The action signifier component indicates that a component can be interacted with. It does not have any specific action associated with it, but it is a visual cue to the user that they can interact with the component. It either shows a simple right-arrow icon or a right-arrow icon with a label.
The color can not be changed, but it does have an inverted property, which is useful on dark backgrounds.
Default variation
Story Default:
<oc-action-signifier-v1></oc-action-signifier-v1>
Configuration
The action signifier component offers the styling variants icon and text.
This component is configurable, allowing you to tailor its features and appearance to your specific needs.
To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.
Usage guidelines
Before integrating the action signifier component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.
Info
See the Action signifier UX documentation for detailed user experience guidelines.
Accessibility
The action signifier component comes with a set of built-in accessibility features to ensure a seamless experience for all users.
It is purely decorative and does not require user interaction.
Ensure to add aria-hidden="true" so assistive technologies ignore it.
Configuration (v1)
Source: ./src/components/action-signifier/v1/Configuration.mdx
Action signifier configuration
Configure the action signifier component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.
Story Default:
<oc-action-signifier-v1></oc-action-signifier-v1>
Interactive configurator (Storybook controls); every option is listed in the API section of this file.
API v1
Source: ./src/components/action-signifier/v1/ActionSignifierV1.API.g.mdx
Action Signifier v1 API
API: <oc-action-signifier-v1> (ActionSignifierV1)
The Action Signifier component indicates that a component can be interacted with. It does not have any specific action associated with it, but it is a visual cue to the user that they can interact with the component. It either shows a simple right-arrow icon or a right-arrow icon with a label. The color can not be changed, but it does have an inverted property, which is useful on dark backgrounds.
Attributes / properties
| Attribute | Type | Default | Required | Description |
|---|---|---|---|---|
variant |
"text" | "icon" |
"icon" |
no | Sets the main styling variant of the action signifier. Use "text" for a text with icon, or "icon" for a standalone icon. |
label |
string |
undefined |
no | Sets the text content for the displayed label. Only applicable when the variant is set to "text". |
inverted |
boolean |
false |
no | Indicates whether the action signifier should be displayed in an inverted color scheme for dark backgrounds. |
Events
| Event | Detail type | Description |
|---|---|---|
oc-property-change |
OcActionSignifierV1Events["oc-property-change"] |
Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information. |
oc-mount |
{ component: string; } |
Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime. |
oc-unmount |
{ component: string; } |
Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime. |
Variations (v1)
Source: ./src/components/action-signifier/v1/Variations.mdx
Variations
Listed below are the most common variations of the action signifier component as well as specific component variations for different use cases.
You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.
Default
Story: components-action-signifier-variations--default · tags: components, action-signifier, v1, variations
The default configuration uses the icon variant displaying the right-arrow icon in size 100.
<oc-action-signifier-v1></oc-action-signifier-v1>
Text variant
Story: components-action-signifier-variations--text · tags: components, action-signifier, v1, variations
The text variant uses the default slot to display a text or link combined with a right-arrow icon in size 50.
The text always renders in the same color.
Args: label=Action, variant=text
<oc-action-signifier-v1 label="Action" variant="text"></oc-action-signifier-v1>
With inverted icon
Story: components-action-signifier-variations--icon-inverted · tags: components, action-signifier, v1, variations
The icon variant combined with the inverted property renders the icon in white on a dark background with a right-arrow icon in size 100.
Args: inverted=true
<oc-action-signifier-v1 inverted></oc-action-signifier-v1>
With inverted text
Story: components-action-signifier-variations--text-inverted · tags: components, action-signifier, v1, variations
The text variant combined with the inverted property renders the text in white on a dark background with a right-arrow icon in size 50.
Args: variant=text, label=Action, inverted=true
<oc-action-signifier-v1 variant="text" label="Action" inverted></oc-action-signifier-v1>