Powered by dead simple CSS props and a mix of common convention rules.
<a/> elements in web development create hyperlinks, which are used to
navigate to other pages, sections within a page, or external resources.
They can be styled to look like buttons or other interactive elements,
making them versatile for navigation and linking purposes. Anchors are
essential for creating a connected and interactive web experience.
<a>
<span>
anchor
</span>
</a>
anchor
<a href="#">
<span>
anchor
</span>
</a>
anchor
| prop | description | requires |
|---|---|---|
| - - button | changes style to look like a button | - |
| - - outline | sets outline style | - - button |
| - - fab | changes style to look like a FAB | - - button |
<a data-props="--button --outline">
<span>
anchor
</span>
</a>
<a data-props="--button --outline --fab">
<icon>
add_circle
</icon>
</a>
| prop | description | purpose |
|---|---|---|
| - - lead | set’s as leading item | left side optical corrections |
| - - trail | set’s as trailing item | right side optical corrections |
<a data-props="--button --outline">
<icon data-props="--lead">
add_circle
</icon>
<span>anchor</span>
</a>
<a data-props="--button --outline">
<span>anchor</span>
<icon data-props="--trail">
add_circle
</icon>
</a>