Installation

npm i @tryg/ui-library

Usage

Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.

Webcomponent

<script type="module">
  import { defineCustomElement as defineCustomIconContainerElement } from '@tryg/ui-library/dist/components/anchor-icon-container';
  import { defineCustomElement as defineCustomIconElement } from '@tryg/ui-library/dist/components/anchor-icon';
  defineCustomIconContainerElement();
  defineCustomIconElement();
</script>
<anchor-icon-container buttonTitle="Close" style="color:black;">
  <anchor-icon name="x" size="small" />
</anchor-icon-container>

Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..

Webcomponent

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-icon-container buttonTitle="Close" style="color:black;">
  <anchor-icon name="x" size="small" />
</anchor-icon-container>

Disabled

<anchor-icon-container buttonTitle="Close" disabled>
  <anchor-icon name="x" size="small" />
</anchor-icon-container>

On dark

<anchor-icon-container buttonTitle="Close" theme="on-dark">
  <anchor-icon name="x" size="small" />
</anchor-icon-container>

Slot

Example of using Icon with Icon Container:

<anchor-icon-container buttonTitle="Close">
  <anchor-icon name="x" size="small" />
</anchor-icon-container>

Notice that the Icon Container is designed to use an Icon in size=small.

Props

theme: The theme of the button. Can be "default" or "on-dark". Defaults to "default". Use "on-dark" when the Icon Container is placed on a dark background.
buttonTitle: The text to display when the user hovers over the button.

States

default: The default state of the button.
hover: The state of the button when the user hovers over it.
pressed: The state of the button when the user clicks on it.
focus: The state of the button when it has focus.

API

anchor-icon-container

Properties

Property	Attribute	Description	Type	Default
`ariaLabel`	`aria-label`	aria-label attribute for the icon container - used for accessibility.	`string`	`undefined`
`disabled`	`disabled`	Set whether or not the icon container should be disabled	`boolean`	`false`
`size`	`size`	The size of the icon container. Can be "md".	`"normal"`	`'normal'`
`theme`	`theme`	The theme of the icon container. Can be "default" or "on-dark".	`"default" \| "on-dark"`	`'default'`
`title`	`title`	The title text that appears on hover.	`string`	`undefined`
`variant`	`variant`	The theme of the icon container. Can be "default" or "brand".	`"brand" \| "default"`	`'default'`

Dependencies

Used by

anchor-navigation-card

Graph

graph TD;
  anchor-navigation-card --> anchor-icon-container
  style anchor-icon-container fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Icon container4.0