Tag

Themes

A primary tag (default)
A secondary tag
A secondary tag
A secondary tag
<CTag label="A primary tag (default)" />
<CTag label="A secondary tag" theme="secondary" />
<CTag label="A secondary tag" theme="warning" />
<CTag label="A secondary tag" theme="negative" />
<CTag label="A primary tag (default)" />
<CTag label="A secondary tag" theme="secondary" />
<CTag label="A secondary tag" theme="warning" />
<CTag label="A secondary tag" theme="negative" />
svelte
Click fold/expand code

Sizes

A xs tag
A sm tag
A md (default) tag
A lg tag
A xl tag
<CTag label="A xs tag" size="xs" />
<CTag label="A sm tag" size="sm" />
<CTag label="A md (default) tag" />
<CTag label="A lg tag" size="lg" />
<CTag label="A xl tag" size="xl" />
<CTag label="A xs tag" size="xs" />
<CTag label="A sm tag" size="sm" />
<CTag label="A md (default) tag" />
<CTag label="A lg tag" size="lg" />
<CTag label="A xl tag" size="xl" />
svelte
Click fold/expand code

Closeable

A closeable tag
<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  function onClose() {
    openNotification({
      title: 'Hi, there',
      theme: 'secondary',
      message: 'You\'ve clicked the close icon',
    })
  }
</script>

<CTag label="A closeable tag" theme="secondary" closeable on:close={onClose} />
<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  function onClose() {
    openNotification({
      title: 'Hi, there',
      theme: 'secondary',
      message: 'You\'ve clicked the close icon',
    })
  }
</script>

<CTag label="A closeable tag" theme="secondary" closeable on:close={onClose} />
svelte
Click fold/expand code

CTag Props

  • label
    string
    default:

    The text content of the tag

  • theme
    'primary' | 'secondary' | 'warning' | 'negative'
    default: primary

    The color theme of tag

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of tag. Notice that default value is 'md' not undefined

  • rounded
    boolean
    default: false

    Determine whether the tag has a rounded border or not

  • closeable
    boolean
    default: false

    If set to true. The tag will have a close icon which can be clicked an emit close event

CTag Events

  • close

    Emit when the close icon clicked

CTag Slots

  • prefix

    Customize prefix content

CTag Exports

No data
Suggest changes to this page
Last update at: 2023/08/12 14:21:56