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

Solid style

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

Sizes

A xs tag
A sm tag
A md (default) tag
A lg tag
A xl tag
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" solid />
<CTag label="A sm tag" size="sm" solid />
<CTag label="A md (default) tag" solid />
<CTag label="A lg tag" size="lg" solid />
<CTag label="A xl tag" size="xl" solid />
<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" solid />
<CTag label="A sm tag" size="sm" solid />
<CTag label="A md (default) tag" solid />
<CTag label="A lg tag" size="lg" solid />
<CTag label="A xl tag" size="xl" solid />
svelte
Click fold/expand code

Rounded

A xs rounded tag
A xs rounded tag
A rounded tag
A lg rounded tag
A xl rounded tag
<CTag label="A xs rounded tag" theme="secondary" rounded solid size="xs" />
<CTag label="A xs rounded tag" theme="warning" rounded size="sm" />
<CTag label="A rounded tag" rounded />
<CTag label="A lg rounded tag" theme="negative" size="lg" rounded solid />
<CTag label="A xl rounded tag" theme="secondary" size="xl" rounded />
<CTag label="A xs rounded tag" theme="secondary" rounded solid size="xs" />
<CTag label="A xs rounded tag" theme="warning" rounded size="sm" />
<CTag label="A rounded tag" rounded />
<CTag label="A lg rounded tag" theme="negative" size="lg" rounded solid />
<CTag label="A xl rounded tag" theme="secondary" size="xl" rounded />
svelte
Click fold/expand code

Closeable

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

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

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

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

<CTag label="A closeable tag" solid closeable on:close={() => onClose('primary')} />
<CTag label="A closeable tag" theme="secondary" closeable on:close={() => onClose('secondary')} />
<CTag label="A closeable tag" solid closeable theme="warning" on:close={() => onClose('warning')} />
<CTag label="A closeable tag" theme="negative" closeable on:close={() => onClose('negative')} />
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

  • solid
    boolean
    default: false

    Determine whether the tag has a solid style 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/15 05:32:01