Icon Link

Requires the use of ember-link.

Variants

<DemoSpaceX>
  <VelvetIconLink @to="/docs/components/icon-link" @variant="primary">
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink @to="/docs/components/icon-link" @variant="secondary">
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink @to="/docs/components/icon-link" @variant="ghost">
    <DemoLinkIcon />
  </VelvetIconLink>
</DemoSpaceX>

Sizes

<DemoSpaceX>
  <VelvetIconLink @size="xs" @to="/docs/components/icon-link">
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink @size="sm" @to="/docs/components/icon-link">
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink @size="md" @to="/docs/components/icon-link">
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink @size="lg" @to="/docs/components/icon-link">
    <DemoLinkIcon />
  </VelvetIconLink>
</DemoSpaceX>

Round

<DemoSpaceX>
  <VelvetIconLink
    @isRound={{true}}
    @to="/docs/components/icon-link"
    @variant="primary"
  >
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink
    @isRound={{true}}
    @to="/docs/components/icon-link"
    @variant="secondary"
  >
    <DemoLinkIcon />
  </VelvetIconLink>
  <VelvetIconLink
    @isRound={{true}}
    @to="/docs/components/icon-link"
    @variant="ghost"
  >
    <DemoLinkIcon />
  </VelvetIconLink>
</DemoSpaceX>

Examples

Providing a Custom Link Instance

Edit this demo

If the @to argument is a valid route path, it is transformed internally to a Link instance. You can also provide a custom Link instance using ember-link's {{link}} helper.

<VelvetIconLink
  @to={{link "docs.components.icon-link" behavior=(hash prevent=false)}}
>
  <DemoLinkIcon />
</VelvetIconLink>

Signature

Element

HTMLAnchorElement

Blocks

Name	Description	Type
`:default` *	The icon of the icon link.	`[]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@isRound`	Indicate if the icon link is round.	`boolean`	`false`
`@size`	The size of the icon link.	`'xs' \| 'sm' \| 'md' \| 'lg'`	`"md"`
`@to` *	A valid route path or a custom `ember-link` `Link` instance.	`string \| Link`	`undefined`
`@variant`	The appearance of the icon link.	`string \| 'primary'`	`"primary"`

Arguments marked with * are required.