Hashtag

Displays a hashtag label with optional click/link behavior. Shows hover effect when interactive.

Also known as: tag link, topic link, hash link, keyword

View in Storybook

When to use

• Displaying clickable hashtags in posts, profiles, or feeds.
• Linking to topic/tag pages.
• Showing static topic labels.

Import

import { Hashtag } from '@vacano/ui'

Usage (static)

<Hashtag>React</Hashtag>
// Renders: #React

Clickable

When onClick is provided, shows pointer cursor and blue hover color.

<Hashtag onClick={() => navigate('/tags/react')}>React</Hashtag>

As link

When href is provided, renders as an <a> element.

<Hashtag href="/tags/react">React</Hashtag>

Group of hashtags

<div style={{ display: 'flex', gap: 12 }}>
  <Hashtag onClick={handleClick}>FrontendWithZoey</Hashtag>
  <Hashtag onClick={handleClick}>React</Hashtag>
  <Hashtag onClick={handleClick}>OpenSource</Hashtag>
</div>

Props

Prop	Type	Default	Description
children	ReactNode	required	Tag text (without #, added automatically)
href	string	-	Link URL (renders as <a>)
ref	Ref<HTMLSpanElement>	-	Forwarded ref
className	string	-	CSS class name for the root element
classnames	HashtagClassNames	-	Custom class names for sub-elements

ClassNames

Key	Description
hash	The # symbol
label	The tag text

Related

• Chip - Inline label with optional delete
• Tags - Tag input component