<.es_link href="#">Sign up</.es_link>API Reference
This component is based on the a element. Use navigate or patch for LiveView client-side navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
as_child
|
boolean
|
false
|
Composes the component into its immediate child instead of rendering its own HTML element. |
class
|
string
|
nil
|
Additional CSS classes. |
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
href
|
string
|
nil
|
The link href. Only for <a> elements. |
navigate
|
string
|
nil
|
LiveView navigate path (client-side navigation). |
patch
|
string
|
nil
|
LiveView patch path (same LiveView). |
rel
|
string
|
nil
|
Rel attribute for <a> elements. |
style
|
string
|
nil
|
Additional inline styles. |
target
|
string
|
nil
|
Target attribute for <a> elements. |
underline
|
string
|
"auto"
|
Underline style: auto, always, hover, none. |
as_child
Composes the component into its immediate child instead of rendering its own HTML element.
Type
boolean
Default
false
class
Additional CSS classes.
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
href
The link href. Only for <a> elements.
Type
string
Default
nil
navigate
LiveView navigate path (client-side navigation).
Type
string
Default
nil
patch
LiveView patch path (same LiveView).
Type
string
Default
nil
rel
Rel attribute for <a> elements.
Type
string
Default
nil
style
Additional inline styles.
Type
string
Default
nil
target
Target attribute for <a> elements.
Type
string
Default
nil
underline
Underline style: auto, always, hover, none.
Type
string
Default
"auto"
Examples
Color
Use the color prop to assign a specific color.
<.flex direction="column">
<.es_link href="#" color="indigo">Sign up</.es_link><.es_link href="#" color="cyan">Sign up</.es_link><.es_link
href="#"
color="orange"
>Sign up</.es_link><.es_link href="#" color="crimson">Sign up</.es_link>
</.flex>High-contrast
Use the high_contrast prop to increase color contrast with the background.
<.flex direction="column">
<.es_link href="#" color="gray">Sign up</.es_link><.es_link href="#" color="gray" high_contrast>Sign up</.es_link>
</.flex>Underline
Use the underline prop to manage the visibility of the underline affordance.