Cluster | tcpsystems/ui

Try it

Svelte

<Cluster justify="between" />

Examples

Actions

Actions.svelte

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

<Cluster>
	<Button variant="primary">Deploy</Button>
	<Button>Roll back</Button>
	<Button variant="ghost">View logs</Button>
</Cluster>

Justify

3 members selected

Justify.svelte

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

<Cluster justify="between">
	<Text>3 members selected</Text>
	<Cluster gap="lg">
		<Button variant="ghost">Cancel</Button>
		<Button variant="danger">Remove</Button>
	</Cluster>
</Cluster>

End aligned

End aligned.svelte

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

<Cluster justify="end">
	<Button variant="ghost">Discard draft</Button>
	<Button variant="primary">Send invoice</Button>
</Cluster>

API

Import

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

Prop	Type	Default
`as?`	`string`	`'div'`
`gap?`	`string`	none
`min?`	`string`	none
`width?`	`string`	none
`justify?`	`string`	none
`children?`	`native`	none

Hook	Kind
`.tcp-cluster`	Root class
`data-gap`	Data attribute
`data-justify`	Data attribute
`data-min`	Data attribute
`data-width`	Data attribute