Abbreviation
The abbreviation component displays abbreviated text or acronyms, revealing their full meaning through a tooltip on hover or focus. Use abbreviation to clarify shortened terms, initialisms, or technical language without interrupting the reading flow.
Abbreviations improve accessibility by providing expanded text for screen readers and visual tooltips for sighted customers. For general inline text styling, use text.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to Use casesUse cases
- Currency codes: Expand abbreviated currency codes like USD, EUR, or GBP so customers understand the exact currency.
- Shipping terms: Clarify shipping acronyms like ETA, COD, or FOB that customers might not recognize.
- Product identifiers: Define shortened product codes like SKU or UPC that appear in order details.
- Subscription terms: Spell out subscription-related abbreviations like APR, MRR, or ARR that appear in billing details.
Anchor to PropertiesProperties
Configure the following properties on the abbreviation component.
- Anchor to idididstringstring
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
- Anchor to titletitletitlestringstringDefault: ''Default: ''
Defines the full expansion of the abbreviation or acronym, helping user agents and users understand the meaning of the abbreviated text. Learn more about the abbreviation element.
Anchor to ExamplesExamples
Anchor to Display an abbreviationDisplay an abbreviation
Define a currency abbreviation with a full-text expansion on hover. This example displays USD inside an s-abbreviation element with the title attribute set to "United States Dollar."
Display an abbreviation
html
Anchor to Best practicesBest practices
- Set a descriptive title: Provide a
titleattribute that spells out the full term so hover and assistive-tech users get the expanded meaning. - Use for genuine abbreviations only: Reserve
s-abbreviationfor shortened terms, acronyms, or initialisms. For general tooltips, use tooltip. - Keep abbreviation text short: Limit the visible text to the actual abbreviated form so the tooltip provides real added value.