---
source: Tile/ClickableTile.svelte
---

<script>
  import { ClickableTile } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

<ClickableTile href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>

## Prevent default behavior

Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior.

<ClickableTile
  href="/"
  on:click={(e) => {
    e.preventDefault();
    // custom behavior
  }}
>
  Carbon Design System
</ClickableTile>

## Light variant

<ClickableTile light href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>

## Disabled state

<ClickableTile disabled href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>
