Link

Requires the use of ember-link.

Variants

<DemoSpaceX>
  <VelvetLink @to="/docs/components/link" @variant="primary">
    Link
  </VelvetLink>
  <VelvetLink @to="/docs/components/link" @variant="secondary">
    Link
  </VelvetLink>
  <VelvetLink @to="/docs/components/link" @variant="ghost">
    Link
  </VelvetLink>
</DemoSpaceX>

Sizes

Link Link Link Link

<DemoSpaceX>
  <VelvetLink @size="xs" @to="/docs/components/link">
    Link
  </VelvetLink>
  <VelvetLink @size="sm" @to="/docs/components/link">
    Link
  </VelvetLink>
  <VelvetLink @size="md" @to="/docs/components/link">
    Link
  </VelvetLink>
  <VelvetLink @size="lg" @to="/docs/components/link">
    Link
  </VelvetLink>
</DemoSpaceX>

Pill

Link Link Link

<DemoSpaceX>
  <VelvetLink @isPill={{true}} @to="/docs/components/link" @variant="primary">
    Link
  </VelvetLink>
  <VelvetLink @isPill={{true}} @to="/docs/components/link" @variant="secondary">
    Link
  </VelvetLink>
  <VelvetLink @isPill={{true}} @to="/docs/components/link" @variant="ghost">
    Link
  </VelvetLink>
</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.

Link

<VelvetLink @to={{link "docs.components.link" behavior=(hash prevent=false)}}>
  Link
</VelvetLink>

Signature

Element

HTMLAnchorElement

Blocks

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

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@isPill`	Indicate if the link is pill shaped.	`boolean`	`false`
`@size`	The size of the 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 link.	`string \| 'primary'`	`"primary"`

Arguments marked with * are required.