Doggo Storybook 0.10.2

Tag

Renders a tag, typically used for displaying labels, categories, or keywords.

Read more Read less

Usage

<.tag>Well-Trained</.tag>

With icon:

<.tag>
  Puppy
  <.icon><Heroicons.edit /></.icon>
</.tag>

With delete button:

<.tag>
  High Energy
  <.button
    phx-click="remove-tag"
    phx-value-tag="high-energy"
    aria-label="Remove tag"
  >
    <.icon><Heroicons.x /></.icon>
  </.button>
</.tag>
Default Open in playground
puppy 
<.tag >
  puppy
</.tag>
Size Open in playground
small normal medium large 
<.tag size="small">
  small
</.tag>
<.tag size="normal">
  normal
</.tag>
<.tag size="medium">
  medium
</.tag>
<.tag size="large">
  large
</.tag>
Variant Open in playground
nil primary secondary info success warning danger 
<.tag variant={nil}>
  nil
</.tag>
<.tag variant="primary">
  primary
</.tag>
<.tag variant="secondary">
  secondary
</.tag>
<.tag variant="info">
  info
</.tag>
<.tag variant="success">
  success
</.tag>
<.tag variant="warning">
  warning
</.tag>
<.tag variant="danger">
  danger
</.tag>
Shape Open in playground
nil pill 
<.tag shape={nil}>
  nil
</.tag>
<.tag shape="pill">
  pill
</.tag>