Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a link.
Available options: accent, alert, brand, info, success
<div class="flex flex-wrap items-center gap-space">
<.navigate to="#" class="link ui-accent">Accent</.navigate>
<.navigate to="#" class="link ui-brand">Brand</.navigate>
<.navigate to="#" class="link ui-alert">Alert</.navigate>
<.navigate to="#" class="link ui-info">Info</.navigate>
<.navigate to="#" class="link ui-success">Success</.navigate>
</div>
Nav
Use `ui-nav` for navigation links. Mark the active item with `aria-current="page"` or `aria-current="location"`.
<nav class="flex flex-wrap items-center gap-space" aria-label="Example">
<.navigate class="link ui-nav" to="#" aria-current="page">Overview</.navigate>
<.navigate class="link ui-nav" to="#">Docs</.navigate>
<.navigate class="link ui-nav" to="#" aria-current="location">API</.navigate>
<.navigate class="link ui-nav ui-accent" to="#" aria-current="page">Accent current</.navigate>
</nav>
Size
Use class="ui-size-{size}" to set the size of a link.
Available options: xs, sm, md (default), lg, xl
<div class="flex flex-wrap items-center gap-space">
<.navigate to="#" class="link ui-size-sm">Small</.navigate>
<.navigate to="#" class="link ui-size-md">Medium</.navigate>
<.navigate to="#" class="link ui-size-lg">Large</.navigate>
<.navigate to="#" class="link ui-size-xl">XL</.navigate>
</div>