Playground
<><ControlIcon iconType="arrow-r" /><ControlIcon iconType="arrow-l" /><ControlIcon iconType="arrow-u" /><ControlIcon iconType="arrow-d" /><ControlIcon iconType="check" /><ControlIcon iconType="close" /><ControlIcon iconType="close-large" /><ControlIcon iconType="close-small" /><ControlIcon iconType="download" /><ControlIcon iconType="error" /><ControlIcon iconType="info" /><ControlIcon iconType="menu" /><ControlIcon iconType="minus" /><ControlIcon iconType="password-show" /><ControlIcon iconType="password-hide" /><ControlIcon iconType="plus" /><ControlIcon iconType="redo" /><ControlIcon iconType="save" /><ControlIcon iconType="search" /><ControlIcon iconType="search-large" /><ControlIcon iconType="undo" /><ControlIcon iconType="zoom-in" /><ControlIcon iconType="zoom-out" /></>
<ControlIcon iconType="arrow-r" />
<span class="control-icon control-icon-arrow-r"></span><!-- doesn't have to be a <div> tag -->
Skin
Brand Blue
<><ControlIcon skin="brand-blue" iconType="arrow-r" /><ControlIcon skin="brand-blue" iconType="arrow-l" /><ControlIcon skin="brand-blue" iconType="arrow-u" /><ControlIcon skin="brand-blue" iconType="arrow-d" /><ControlIcon skin="brand-blue" iconType="check" /><ControlIcon skin="brand-blue" iconType="close" /><ControlIcon skin="brand-blue" iconType="close-large" /><ControlIcon skin="brand-blue" iconType="close-small" /><ControlIcon skin="brand-blue" iconType="download" /><ControlIcon skin="brand-blue" iconType="error" /><ControlIcon skin="brand-blue" iconType="info" /><ControlIcon skin="brand-blue" iconType="menu" /><ControlIcon skin="brand-blue" iconType="minus" /><ControlIcon skin="brand-blue" iconType="password-show" /><ControlIcon skin="brand-blue" iconType="password-hide" /><ControlIcon skin="brand-blue" iconType="plus" /><ControlIcon skin="brand-blue" iconType="redo" /><ControlIcon skin="brand-blue" iconType="save" /><ControlIcon skin="brand-blue" iconType="search" /><ControlIcon skin="brand-blue" iconType="search-large" /><ControlIcon skin="brand-blue" iconType="undo" /><ControlIcon skin="brand-blue" iconType="zoom-in" /><ControlIcon skin="brand-blue" iconType="zoom-out" /></>
White
<Box backgroundColor="dark-blue" padding="4"><ControlIcon skin="white" iconType="arrow-r" /><ControlIcon skin="white" iconType="arrow-l" /><ControlIcon skin="white" iconType="arrow-u" /><ControlIcon skin="white" iconType="arrow-d" /><ControlIcon skin="white" iconType="check" /><ControlIcon skin="white" iconType="close" /><ControlIcon skin="white" iconType="close-large" /><ControlIcon skin="white" iconType="close-small" /><ControlIcon skin="white" iconType="download" /><ControlIcon skin="white" iconType="error" /><ControlIcon skin="white" iconType="info" /><ControlIcon skin="white" iconType="menu" /><ControlIcon skin="white" iconType="minus" /><ControlIcon skin="white" iconType="password-show" /><ControlIcon skin="white" iconType="password-hide" /><ControlIcon skin="white" iconType="plus" /><ControlIcon skin="white" iconType="redo" /><ControlIcon skin="white" iconType="save" /><ControlIcon skin="white" iconType="search" /><ControlIcon skin="white" iconType="search-large" /><ControlIcon skin="white" iconType="undo" /><ControlIcon skin="white" iconType="zoom-in" /><ControlIcon skin="white" iconType="zoom-out" /></Box>
Semantics
By default, a Control Icon has no special semantics. It is typically used with a <span> tag, and that is what the React Visage component will use as its default tag.
If your Control Icon is clickable, you need to apply the proper HTML semantics:
If clicking the icon performs a navigation, use the
<a>tag. In React Visage, set thecomponentprop to have a value of"a". You can also place the Control Icon inside of a link instead.If clicking the icon performs an in-page action, use a
<button>tag instead, or place the Control Icon inside a with the "Unstyled" skin.
Hover Container
By Default, a Control Icon can change its color when it is directly hovered over. However, if you want the icon to change color when an ancestor is hovered over, place the a Control Icon Hover Container on that ancestor.
Notice in the following example how the ControlIcon changes color when you hover anywhere inside of the ControlIconHoverContainer.
<ControlIconHoverContainer>other content<ControlIcon iconType="undo" skin="brand-blue" /></ControlIconHoverContainer>
<span class="control-icon-hover-container">other content<span class="control-icon control-icon-undo control-icon-brand-blue"></span></span>
Components
ControlIcon
| Prop | Type | Default | Description |
|---|---|---|---|
| iconType | "menu" | "search" | "download" | "error" | "arrow-r" | "arrow-l" | "arrow-u" | "arrow-d" | "check" | "close" | "close-large" | "close-small" | "info" | "minus" | "password-show" | "password-hide" | "plus" | "redo" | "save" | "search-large" | "undo" | "zoom-in" | "zoom-out" | required | The type of icon to show |
| skin | "white" | "standard" | "brand-blue" | "standard" | The visual style of the Control Icon |
All other props are forwarded to the element specified in thecomponentprop(default: <span/>)
ControlIconHoverContainer
ControlIconHoverContainer has no props of its own
All props are forwarded to the element specified in thecomponentprop(default: <span/>)
Guidelines
Do
Use to enable user action when space is limited.
Don't
Alter or manipulate the existing icons.
Change or add colors to the existing icons.
Accessibility Guidelines
Control icons need to use the correct HTML tag and/or ARIA attributes, depending on their function:
If the control icon is just for display and is not independently clickable (e.g. it just shows an "info" icon, or a ">" icon at the end of a hyperlink), it should just use a
spantag.If the control icon is clickable by itself, and acts functionally as a button (i.e. it can be clicked to perform an action on the page), it should be a
spantag inside abuttontag.If the control icon is clickable by itself, and acts as a hyperlink (i.e. clicking on it takes the user to a new page), it should be a
spantag inside anatag.
Then, it also needs to either have its role made obvious for assistive technologies, or it needs to be hidden from them:
If the icon is purely decorative (e.g. the ">" at the end of a text link or button), it should have the attribute
aria-hidden="true"to hide it from assistive technologies.If the icon is clickable by itself, but has nearby text that explains what it does, it should have an
aria-labelledbyattribute whose value is the id of the element that describes it.If the icon is clickable and sits on its own, but does not have nearby text that explains what it does (e.g. an "x" button that closes a panel), the button should have an inner
spanthat is visually hidden. Inside this span, add localized text explaining what the button does (e.g. "Close", "Next").