Icon Tiles represent objects and resources unrelated or directly related to a product.
Usage
When to use
- To represent an object or as part of a page title.
When not to use
- When an interactive or clickable element is needed. Use a Button instead.
Color
Use Neutral if the object or page is not a specific product feature but something universal. For example, for a “Dashboard” or “User” page.
Use a product-specific color for objects or pages directly related to a product. For example:
- For a page showing a “Consul cluster”
- In a card or table row that represents a “Consul cluster”
Size
Medium is the default size, but we recommend using the size that best fits the supporting text or UI. For example, don’t use large Icon Tiles in tables.
Secondary icon
A secondary icon can be added to provide additional context. For example, for an “Add user” page the “plus” icon indicates the action.
Using with content
Use Icon Tiles as a decorative element or accessory next to a text label for the object or page they are being used to represent. Icon Tiles should not be used without accompanying content.
Using with interactive elements
Avoid placing Icon Tiles immediately next to secondary icon only button variants. Even though they visually look different, their proximity can confuse users because they share similar characteristics. Distinguishability, an accessibility standard, discourages interfaces from using elements that look alike but behave differently when in close visual proximity.
How to use this component
The default invocation requires an @icon argument or a @logo argument. If providing an @icon argument, it renders a medium neutral Icon Tile. If providing a @logo argument, it renders the logo in the relevant brand styles.
<Hds::IconTile @icon="user" />
<Hds::IconTile @logo="vault" />
Colors
A different color Icon Tile can be invoked using the @color argument.
<Hds::IconTile @color="waypoint" @icon="user" />
Size
A different size Icon Tile can be invoked using the @size argument.
<Hds::IconTile @logo="boundary" @size="small" />
<Hds::IconTile @logo="packer" @size="large" />
Secondary icon
To add a secondary icon, use the @iconSecondary argument with any icon as the value.
<Hds::IconTile @icon="user" @iconSecondary="plus" />
Component API
IconTile
size
enum
- small
- medium (default)
- large
color
enum
- neutral (default)
- boundary
- consul
- nomad
- packer
- terraform
- vagrant
- vault
- vault-secrets
- waypoint
@color parameter is overwritten if a @logo parameter is passed, in which case the product “brand“ color is used.
logo
enum
- hcp
- boundary
- consul
- nomad
- packer
- terraform
- vagrant
- vault
- vault-secrets
- vault-radar
- waypoint
icon
string
iconSecondary
string
…attributes
...attributes.
Anatomy
| Element | Usage |
|---|---|
| Container | Required |
| Icon | Required |
| Secondary icon | Optional |
Conformance rating
When used as recommended, there should not be any accessibility issues with this component.
Accounting for screen readers
Because Icon Tiles are purely decorative, they’re hidden from screen readers by default.
Applicable WCAG Success Criteria
This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
-
1.4.11
Non-text Contrast (Level AA):
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): user interface components; graphical objects.
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
4.15.0
Updated
Updated visual design of IconTile to make it distinguishable from secondary IconButton.