Swatch | tcpsystems/ui

Try it

#2563eb

Svelte

<Swatch value="#2563eb" label="#2563eb" />

Examples

Brand colours

Brand accent #2563eb

Brand colours.svelte

<script lang="ts">
	import Swatch from '@tcpsystems/ui/foundation/Swatch';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Swatch value="var(--tcp-color-accent-solid)" label="Brand accent" />
	<Swatch value="#2563eb" label="#2563eb" />
</Cluster>

Sizes

Compact Default Large

Sizes.svelte

<script lang="ts">
	import Swatch from '@tcpsystems/ui/foundation/Swatch';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Swatch value="#2563eb" label="Compact" size="sm" />
	<Swatch value="#2563eb" label="Default" />
	<Swatch value="#2563eb" label="Large" size="lg" />
</Cluster>

Without label

Without label.svelte

<script lang="ts">
	import Swatch from '@tcpsystems/ui/foundation/Swatch';
</script>

<Swatch value="#2563eb" />

API

Import

import Swatch from '@tcpsystems/ui/foundation/Swatch';

Prop	Type	Default
`value`	`string`	none
`label?`	`string`	none
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`

Hook	Kind
`.tcp-swatch`	Root class
`data-size`	Data attribute