CatalystApp Store Badgesv1.1.2Documentation Under Review
AppStoreBadges are easily recognizable visual elements that convey meaning and cues to the user in a compact and efficient way.
Installation
npm install @pmi/catalyst-app-store-badgesOverview
The App Store Badges package provides official download badges for mobile application stores. Each badge is built on top of the BaseIcon component from @pmi/catalyst-icons, ensuring consistent sizing, coloring, and rendering across all applications.
Examples
Basic Usage (Placeholder)
Display a placeholder badge with default settings:
API Reference
All app store badge components accept the same props as BaseIcon from @pmi/catalyst-icons:
Prop
Type
Accessibility
App Store Badges inherit accessibility features from the BaseIcon component and include additional considerations for interactive use:
ARIA Labels
When wrapping badges in links, always provide descriptive aria-label attributes:
<a href="..." aria-label="Download on the Apple App Store">
<AppleAppStoreBadge size="full" color="original" />
</a>Screen Reader Support
- SVG badges are rendered with
aria-hidden="true"by default - Meaning is conveyed through the parent link's
aria-label - Avoid redundant text adjacent to badge images
Component Generation
App store badge components are auto-generated from SVG assets:
- Components are generated by
~/process-packages-assets.cjs - Each SVG in
assets/directory becomes a component - Exports are managed by barrelsby
- Do not manually edit generated component files
To add new badges:
- Add SVG file to
src/components/app-store-badges/assets/ - Run asset processing script
- Components will be auto-generated and exported
Design Tokens
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.
Flags
A comprehensive collection of 196+ country and territory flag icons built on the BaseIcon component, providing consistent sizing, coloring, and customization options.