# Action Buttons

## Example

```svelte
<script lang="ts">
	import { Box, toast } from '@foxui/all';
	import { ActionButtons, ReplyButton, LikeButton, RepostButton, BookmarkButton } from '@foxui/all';

	let liked = $state(false);
	let bookmarked = $state(false);
	let likeCount = $state(420);

	let liked2 = $state(false);
	let likeCount2 = $state(99);
	let bookmarked2 = $state(false);
</script>

<Box class="not-prose relative flex min-h-24 w-full flex-col gap-8">
	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">ActionButtons</h3>
		<ActionButtons
			reply={{ count: 69, onclick: () => toast('Reply clicked') }}
			repost={{ count: 42, onclick: () => toast('Repost clicked') }}
			like={{
				count: likeCount,
				active: liked,
				onclick: () => {
					likeCount += liked ? -1 : 1;
					liked = !liked;
				}
			}}
			bookmark={{
				active: bookmarked,
				onclick: () => {
					bookmarked = !bookmarked;
				}
			}}
		/>
	</div>

	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">Individual Buttons</h3>
		<div class="text-base-500 dark:text-base-400 flex gap-8">
			<ReplyButton count={5} onclick={() => toast('Reply')} />
			<RepostButton count={12} onclick={() => toast('Repost')} />
			<LikeButton count={likeCount2} active={liked2} onclick={() => {
				likeCount2 += liked2 ? -1 : 1;
				liked2 = !liked2;
			}} />
			<BookmarkButton active={bookmarked2} onclick={() => {
				bookmarked2 = !bookmarked2;
			}} />
		</div>
	</div>
</Box>
```

## Documentation

## Usage

### ActionButtons Container

```svelte
<script lang="ts">
	let liked = $state(false);
	let bookmarked = $state(false);
</script>

<ActionButtons
	reply={{ count: 5, onclick: () => console.log('reply') }}
	repost={{ count: 12, onclick: () => console.log('repost') }}
	like={{ count: 99, active: liked, onclick: () => (liked = !liked) }}
	bookmark={{ active: bookmarked, onclick: () => (bookmarked = !bookmarked) }}
/>
```

### Individual Buttons

Each button can be used standalone:

```svelte
<script lang="ts">
	let liked = $state(false);
</script>

<LikeButton count={42} active={liked} onclick={() => (liked = !liked)} />
```

### State Management

The parent controls the state via `active` prop. The `onclick` callback handles toggling:

```svelte
<LikeButton
	count={42}
	active={liked}
	onclick={async () => {
		await api.like(postId);
		liked = !liked;
	}}
/>
```

## API Reference

### ActionButtons
Container for social action buttons (reply, repost, like, bookmark).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| reply | `ReplyButtonProps` | `-` | Props for the reply button. Omit to hide. |
| repost | `RepostButtonProps` | `-` | Props for the repost button. Omit to hide. |
| like | `LikeButtonProps` | `-` | Props for the like button. Omit to hide. |
| bookmark | `BookmarkButtonProps` | `-` | Props for the bookmark button. Omit to hide. |
| customActions | `Snippet` | `-` | Additional custom action buttons. |
| class | `string` | `-` | Additional CSS classes to apply. |

### ReplyButton
A reply action button with count.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| count | `number` | `-` | Number of replies to display. |
| onclick | `() => void` | `-` | Callback when the reply button is clicked. |
| href | `string` | `-` | URL for the reply action link. Used when onclick is not provided. |

### RepostButton
A repost action button with count.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| count | `number` | `-` | Number of reposts to display. |
| active | `boolean` | `false` | Whether the post is reposted. (bindable) |
| onclick | `() => void` | `-` | Callback when the repost button is clicked. |
| href | `string` | `-` | URL for the repost action link. Used when onclick is not provided. |

### LikeButton
A like toggle button with count.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| count | `number` | `-` | Number of likes to display. |
| active | `boolean` | `false` | Whether the post is liked. (bindable) |
| onclick | `() => void` | `-` | Callback when the like button is clicked. |
| href | `string` | `-` | URL for the like action link. Used when onclick is not provided. |

### BookmarkButton
A bookmark toggle button.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| active | `boolean` | `false` | Whether the post is bookmarked. (bindable) |
| onclick | `() => void` | `-` | Callback when the bookmark button is clicked. |