Button groups

<script lang="ts">
	import { ButtonGroup, IconButton } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<ButtonGroup aria-label="Playback">
	<IconButton variant="tonal" width="narrow" size="m" title="Previous">
		<Icon>skip_previous</Icon>
	</IconButton>
	<IconButton variant="filled" width="wide" size="m" title="Play">
		<Icon>play_arrow</Icon>
	</IconButton>
	<IconButton variant="tonal" width="narrow" size="m" title="Next">
		<Icon>skip_next</Icon>
	</IconButton>
</ButtonGroup>

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	let places = $state([
		{ label: 'Work', icon: 'work', selected: true },
		{ label: 'Restaurant', icon: 'restaurant', selected: false },
		{ label: 'Coffee', icon: 'coffee', selected: false },
		{ label: 'Home', icon: 'home', selected: false },
	])

	const choose = (index: number) => {
		places.forEach((place, i) => (place.selected = i === index))
	}
</script>

<ButtonGroup variant="connected" aria-label="Place">
	{#each places as place, index (place.label)}
		<Button variant="tonal" toggle bind:selected={place.selected} onclick={() => choose(index)}>
			{#snippet start()}
				<Icon>{place.icon}</Icon>
			{/snippet}
			{place.label}
		</Button>
	{/each}
</ButtonGroup>

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	let styles = $state({ bold: true, italic: false, underline: false })
</script>

<ButtonGroup variant="connected" aria-label="Text style">
	<Button variant="tonal" toggle bind:selected={styles.bold}>
		{#snippet start()}
			<Icon>format_bold</Icon>
		{/snippet}
		Bold
	</Button>
	<Button variant="tonal" toggle bind:selected={styles.italic}>
		{#snippet start()}
			<Icon>format_italic</Icon>
		{/snippet}
		Italic
	</Button>
	<Button variant="tonal" toggle bind:selected={styles.underline}>
		{#snippet start()}
			<Icon>format_underlined</Icon>
		{/snippet}
		Underline
	</Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, IconButton } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	const alignments = [
		{ title: 'Align left', icon: 'format_align_left' },
		{ title: 'Align center', icon: 'format_align_center' },
		{ title: 'Align right', icon: 'format_align_right' },
	]
</script>

{#each ['xs', 'm'] as const as size (size)}
	<ButtonGroup variant="connected" aria-label="Alignment, size {size}">
		{#each alignments as alignment (alignment.icon)}
			<IconButton {size} variant="tonal" title={alignment.title}>
				<Icon>{alignment.icon}</Icon>
			</IconButton>
		{/each}
	</ButtonGroup>
{/each}

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
</script>

<ButtonGroup expandedRatio={0.5} aria-label="Rating">
	<Button variant="tonal">Bad</Button>
	<Button variant="tonal">Fine</Button>
	<Button variant="tonal">Great</Button>
</ButtonGroup>

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
</script>

<ButtonGroup
	variant="connected"
	aria-label="Custom button group"
	--np-button-group-space="0.25rem"
	--np-button-group-inner-corner="1rem"
>
	<Button variant="tonal">Start</Button>
	<Button variant="tonal">Middle</Button>
	<Button variant="tonal">End</Button>
</ButtonGroup>