Tag

Default

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Alpha"
}} />

Grey

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Grey",
  classes: "govuk-tag--grey"
}} />

Blue

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Blue",
  classes: "govuk-tag--blue"
}} />

Light blue

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Light blue",
  classes: "govuk-tag--light-blue"
}} />

Turquoise

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Turquoise",
  classes: "govuk-tag--turquoise"
}} />

Green

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Green",
  classes: "govuk-tag--green"
}} />

Purple

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Purple",
  classes: "govuk-tag--purple"
}} />

Pink

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Pink",
  classes: "govuk-tag--pink"
}} />

Red

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Red",
  classes: "govuk-tag--red"
}} />

Orange

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Orange",
  classes: "govuk-tag--orange"
}} />

Yellow

Svelte code

<script>
	import { Tag } from '@danboscaro/govuk-svelte'
</script>

<Tag {...{
  text: "Yellow",
  classes: "govuk-tag--yellow"
}} />