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 defineCustomIconButtonElement } from '@tryg/ui-library/dist/components/anchor-icon-button';
  import { defineCustomElement as defineCustomIconElement } from '@tryg/ui-library/dist/components/anchor-icon';
  defineCustomIconButtonElement();
  defineCustomIconElement();
</script>
<anchor-icon-button buttonTitle="Close" style="color:black;">
  <anchor-icon slot="icon" name="x" size="small" />
</anchor-icon-button>

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-button buttonTitle="Close" style="color:black;">
  <anchor-icon slot="icon" name="x" size="small" />
</anchor-icon-button>

Disabled

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

On dark

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

Slot

icon: The icon to display inside the button.

The Icon Button does not display an Icon on it's own. The Icon is implemented as a slot to allow total freedom.

Use the attribute slot=icon to show an Icon in Icon Button.

Example of using Icon with Icon Button:

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

Notice that the Icon Button 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 Button 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-button

Properties

Property	Attribute	Description	Type	Default
`ariaLabel`	`aria-label`	aria-label attribute for the button - used for accessibility.	`string`	`undefined`
`buttonTitle`	`button-title`	The title text that appears on hover.	`string`	`undefined`
`disabled`	`disabled`	Set whether or not the icon button should be disabled	`boolean`	`false`
`tag`	`tag`	Overrides the root tag element of the component.	`string`	`undefined`
`theme`	`theme`	The theme of the button. Can be "default" or "on".	`"default" \| "on-dark"`	`'default'`

CSS Custom Properties

Name	Description
`--focus-ring-color`	Changes the color of the outline for the component
`--focus-ring-offset`	Changes the offset of the outline for the component
`--focus-ring-style`	Changes the style of the outline for the component
`--focus-ring-width`	Changes the size of the outline for the component
`--icon-button-background`	Set the background color of the
`--icon-button-background-hover`	Set the hover background color of the
`--icon-button-background-on-dark`	Set the background color on-dark of the
`--icon-button-background-on-dark-hover`	Set the hover background color on-dark of the
`--icon-button-background-on-dark-pressed`	Set the pressed background color on-dark of the
`--icon-button-background-ressed`	Set the pressed background color of the
`--icon-button-border-radius`	Set the border radius of the
`--icon-button-color`	This is the color of the icon itself
`--icon-button-color-active`	This is the hover color of the icon itself
`--icon-button-color-hover`	This is the hover color of the icon itself
`--icon-button-color-on-dark`	Set the color on-dark of the
`--icon-button-color-on-dark-hover`	Set the hover color on-dark of the
`--icon-button-color-on-dark-pressed`	Set the pressed color on-dark of the
`--icon-button-padding`	Set the padding for
`--icon-button-size`	Set the size of the
`--outline-override`	Shorthand for changing the outline for the component

Dependencies

Used by

Graph

graph TD;
  anchor-help-box --> anchor-icon-button
  anchor-navigation-card --> anchor-icon-button
  anchor-notification-banner --> anchor-icon-button
  anchor-quantity --> anchor-icon-button
  style anchor-icon-button fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Icon button4.0