| | |
| Label for screen readers to announce IconButtonLink.
| |
| | |
| | |
| "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white" | "red" | |
| Primary colors to apply to the IconButtonLink background.
| |
| | |
| Defines a new icon different from the built-in Gestalt icons.
| |
| | |
| Available for testing purposes, if needed. Consider
better queries before using this prop.
| |
| | |
| When disabled, IconButtonLink looks inactive and cannot be interacted with.
| |
| "lightBackground" | "darkBackground" | |
| Indicates whether this component is hosted in a light or dark container.
Used for improving focus ring color contrast.
| |
| "360" | "3d" | "3d-move" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | "add-small" | "ads-overview" | "ads-stats" | "alert" | "align-bottom" | "align-bottom-center" | "align-bottom-left" | "align-bottom-right" | "align-middle" | "align-top" | "align-top-center" | "align-top-left" | "align-top-right" | "alphabetical" | "android-share" | "angled-pin" | "animate" | "api" | "apple" | "apps" | "ar-try-on" | "arrow-back" | "arrow-circle-back" | "arrow-circle-down" | "arrow-circle-forward" | "arrow-circle-up" | "arrow-counter-clockwise" | "arrow-double-back" | "arrow-double-forward" | "arrow-down" | "arrow-end" | "arrow-forward" | "arrow-left-curved" | "arrow-nested" | "arrow-small-up-right" | "arrow-start" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrows-vertical" | "aspect-ratio" | "audio-bars" | "audio-mix" | "audio-playing" | "bell" | "bell-fill" | "birthday-cake" | "board" | "board-sticker-large" | "board-sticker-small" | "border" | "border-shadow" | "briefcase" | "building-business" | "business-hierarchy" | "calendar" | "calendar-check" | "camera" | "camera-flip" | "camera-roll" | "cancel" | "cancel-small" | "canonical-pin" | "captions" | "captions-outline" | "card-stack" | "check" | "check-circle" | "check-circle-fill" | "check-small" | "chevron-down-circle" | "chevron-left-circle" | "chevron-right-circle" | "chevron-small-down" | "chevron-small-left" | "chevron-small-right" | "chevron-small-up" | "chevron-up-circle" | "circle" | "circle-ellipsis" | "circle-information-fill" | "circle-initializing" | "clear" | "clips" | "clock" | "clock-checked" | "cloud-server" | "code" | "code-check" | "cog" | "collage" | "collapse" | "color" | "color-palette" | "color-picker" | "color-solid" | "color-split" | "compass" | "compose" | "contrast" | "conversion-tag" | "copy-to-clipboard" | "credit-card" | "crop" | "cutout" | "dash" | "dash-small" | "data-source" | "design" | "desktop" | "diagnostics" | "directional-arrow-left" | "directional-arrow-right" | "download" | "drag-drop" | "draw" | "dropbox" | "duplicate" | "edit" | "ellipsis" | "envelope" | "erase" | "erase-auto" | "etsy" | "expand" | "eye" | "eye-hide" | "face-happy" | "face-neutral" | "face-sad" | "face-smiley" | "face-smiley-outline" | "face-smiley-plus" | "face-tryon" | "facebook" | "fade" | "file-box" | "file-unknown" | "fill-opaque" | "fill-transparent" | "filter" | "flag" | "flame" | "flash" | "flash-automatic" | "flash-slash" | "flashlight" | "flip-horizontal" | "flip-vertical" | "folder" | "forward" | "gauge" | "ghost" | "gif" | "gif-visual" | "gift" | "globe" | "globe-checked" | "gmail" | "graph-bar" | "graph-pie" | "hand" | "hand-pointing" | "handle" | "heart" | "heart-broken" | "heart-health" | "heart-outline" | "highlights" | "history" | "home" | "home-fill" | "idea-pin" | "image-portrait" | "impressum" | "indent" | "info-circle" | "information" | "insights-audience" | "insights-conversion" | "instagram" | "invoice" | "kakao-talk" | "key" | "knoop" | "lab-flask" | "lasso-magic" | "layout" | "lightbulb" | "lightning-bolt-circle" | "link" | "link-broken" | "lips" | "list-numbered" | "list-numbered-rtl" | "location" | "lock" | "logo-large" | "logo-small" | "logout" | "magic-pen" | "magic-wand" | "manage-access" | "margins-large" | "margins-medium" | "margins-small" | "maximize" | "megaphone" | "menu" | "messenger" | "microphone" | "minimize" | "mobile" | "moon" | "move-pin" | "music-off" | "music-on" | "mute" | "mute-fill" | "orientation-landscape" | "orientation-portrait" | "outdent" | "outlook" | "overlay-text" | "overlay-text-outline" | "overview" | "paper-clip" | "paper-lines-plus" | "pause" | "pen" | "pen-auto" | "people" | "performance-plus" | "person" | "person-add" | "person-fill" | "person-magnifying-glass" | "phone" | "pin" | "pin-hide" | "pincode" | "pinterest" | "play" | "protect" | "question-mark" | "record-limit" | "record-limit-10" | "record-limit-15" | "record-limit-30" | "record-limit-5" | "record-limit-60" | "redo" | "refresh" | "remove" | "reorder-images" | "replace" | "report" | "rewind" | "ribbon" | "rocketship" | "rotate" | "saturation" | "save-outline" | "saved" | "scale" | "scissors" | "search" | "search-by-image" | "search-fill" | "security" | "select" | "send" | "shadows" | "shapes" | "share" | "shopping-bag" | "shrink" | "shuffles" | "skintone" | "slide" | "smiley" | "snapchat" | "sort-ascending" | "sort-descending" | "sound" | "sound-fill" | "sound-slash" | "sound-slash-fill" | "sparkle" | "speech" | "speech-ellipsis" | "speech-ellipsis-fill" | "speech-exclamation-point" | "speech-heart" | "speech-outline" | "speed" | "speed-.3x" | "speed-.5x" | "speed-1x" | "speed-2x" | "speed-3x" | "spread" | "star" | "star-half" | "star-outline" | "sticker" | "sticker-image" | "sun" | "swap" | "switch-account" | "table" | "tag" | "tag-star" | "target" | "telegram" | "template" | "terms" | "text" | "text-align-center" | "text-align-left" | "text-align-right" | "text-all-caps" | "text-extra-small" | "text-invert" | "text-large" | "text-line-height" | "text-medium" | "text-sentence-case" | "text-size" | "text-small" | "text-spacing" | "text-sticker" | "thumbs-down" | "thumbs-up" | "timer" | "timer-10" | "timer-3" | "trash-can" | "trending" | "undo" | "unlock" | "upload-feed" | "viber" | "video-advance-10-seconds" | "video-camera" | "video-rewind-10-seconds" | "view-type-default" | "view-type-dense" | "view-type-list" | "view-type-sparse" | "visit" | "warmth" | "wave" | "whatsapp" | "wifi-no" | "workflow-status-all" | "workflow-status-canceled" | "workflow-status-halted" | "workflow-status-in-progress" | "workflow-status-ok" | "workflow-status-problem" | "workflow-status-queued" | "workflow-status-unstarted" | "workflow-status-warning" | "x-social" | "yahoo" | "youtube" | |
| SVG icon from the Gestalt icon library to use within Icon.
See the
icon library to explore available options.
| |
| "gray" | "darkGray" | "red" | "white" | "brandPrimary" | |
| Primary color to apply to the
Icon.
| |
| (arg1: {
event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>;
dangerouslyDisableOnNavigation: () => void;
}) => void | |
| | |
| | |
| Sets a padding for the IconButtonLink.
| |
| | |
| Specifies the relationship between the current document and the linked document.
| |
| "xs" | "sm" | "md" | "lg" | "xl" | |
| The maximum height and width of IconButtonLink.
| |
| | |
| Removes IconButtonLink from sequential keyboard navigation to improve accessibility.
| |
| | |
| Define the frame or window to open the anchor defined on `href`.
| |
| {
accessibilityLabel?: string;
inline?: boolean;
idealDirection?: "up" | "right" | "down" | "left";
text: string;
zIndex?: Indexable;
} | |
| Adds a
Tooltip on hover/focus of the IconButtonLink.
| |