BYOCSS (Bring Your Own CSS) Svelte Components
Link Button The link button allows the user to navigate to another page on the web.
A Link Notifications Disabled
This example uses TailwindCSS 
<div class="flex flex-row gap-3">
  <LinkButton variant="example-default" href="./link-button">A Link</LinkButton>
  <LinkButton variant="example-default" href="./link-button">
    <span slot="icon">
      <BrandGithub size="1.5rem" />
    </span>
  </LinkButton>
  <LinkButton variant="example-default" href="./link-button">
    Notifications
    <span slot="trailingIcon">
      <Bell size="1.5rem" />
    </span>
  </LinkButton>
  <LinkButton disabled variant="example-default" href="./link-button">Disabled</LinkButton>
</div>
Props
Name
Type
Default
Description
variant string 'default'
This defines which variant of the link button component from your theme configuration will be applied.
css string
Extra css classes you would like to have applied to the main link button component.
href string
Hyperlink reference.
disabled boolean false
Will prevent the link from navigating you to the href. When disabled the component will look for a variant either called "{variant}-disabled" or "disabled"
on:click VoidFunction
A function that will be called on click of the button.
Slots
Name
Description
This will be placed to the right of an icon (if provided) and to the left of a tailing icon (if provided).
icon
An icon that will be placed on the left of the link button.
trailingIcon
An icon that will be placed on the right side of the link button.
Theme
Name
Type
Description
icon string | object
It can be a single string containing all styles applied to the icon or it can be an object broken up in to multiple props.
style string | object
The name of this prop could be anything other than "icon". It can be a single string containing all styles applied to the link button or it can be an object broken up in to multiple props.