Action Buttons

Example

ActionButtons

Individual Buttons

Usage

ActionButtons Container

		<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:

		<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:

		<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).

Property Type Description

object

Props for the reply button. Omit to hide. Default: —

repost

object

Props for the repost button. Omit to hide. Default: —

object

Props for the like button. Omit to hide. Default: —

bookmark

object

Props for the bookmark button. Omit to hide. Default: —

customActions

Snippet

Additional custom action buttons. Default: —

class

string

Additional CSS classes to apply. Default: —

Property

repost

bookmark

customActions

class

ReplyButton

A reply action button with count.

Property Type Description

count

number

Number of replies to display. Default: —

onclick

function

Callback when the reply button is clicked. Default: —

href

string

URL for the reply action link. Used when onclick is not provided. Default: —

Property

count

onclick

href

RepostButton

A repost action button with count.

Property Type Description

count

number

Number of reposts to display. Default: —

active $bindable

boolean

Whether the post is reposted. Default: false

onclick

function

Callback when the repost button is clicked. Default: —

href

string

URL for the repost action link. Used when onclick is not provided. Default: —

Property

count

active

onclick

href

LikeButton

A like toggle button with count.

Property Type Description

count

number

Number of likes to display. Default: —

active $bindable

boolean

Whether the post is liked. Default: false

onclick

function

Callback when the like button is clicked. Default: —

href

string

URL for the like action link. Used when onclick is not provided. Default: —

Property

count

active

onclick

href

BookmarkButton

A bookmark toggle button.

Property Type Description

active $bindable

boolean

Whether the post is bookmarked. Default: false

onclick

function

Callback when the bookmark button is clicked. Default: —

Property

active

onclick