Header Item

<gstock-header-item> | GstockHeaderItem

Disabled

Use the disabled attribute to disable the icon button.

<gstock-header-item icon="camera" disabled></gstock-header-item>

Use the href attribute to convert the button to a link.

<gstock-header-item
  icon="link"
  label="Link"
  href="https://example.com">
</gstock-header-item>

<gstock-header-item
  icon="external-link"
  label="New Window"
  href="https://example.com"
  target="_blank">
</gstock-header-item>

<gstock-header-item
  icon="download"
  label="Download"
  href="/assets/images/gstock.svg"
  download>
</gstock-header-item>

<gstock-header-item
  icon="x-circle"
  label="Disabled"
  href="https://example.com"
  disabled>
</gstock-header-item>

Responsive

Use the hide-xsmall, hide-small, hide-medium, hide-large and hide-xlarge attributes for hide de content elements in specific device breakpoints.

XS S M L XL 
<gstock-header-item hide-small hide-medium hide-large hide-xlarge>
  XS
</gstock-header-item>
<gstock-header-item hide-xsmall hide-medium hide-large hide-xlarge>
  S
</gstock-header-item>
<gstock-header-item hide-xsmall hide-small hide-large hide-xlarge>
  M
</gstock-header-item>
<gstock-header-item hide-xsmall hide-small hide-medium hide-xlarge>
  L
</gstock-header-item>
<gstock-header-item hide-xsmall hide-small hide-medium hide-large>
  XL
</gstock-header-item>

Usage with Tooltip

Wrap a tooltip around an icon button to provide contextual information to the user. 

<gstock-tooltip content="Settings" placement="bottom">
  <gstock-header-item icon="settings"></gstock-header-item>
</gstock-tooltip>

Usage with Badge

Slotting an gstock-badge element.

4 
<gstock-header-item icon="bell">
  <gstock-badge color="danger" pulse>4</gstock-badge>
</gstock-header-item>