import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./link.stories";
# Link / Text button
Text Links and Buttons use the `primary-500` color and can use either the `` or `` tags.
Choose which based on the action the button takes:
- if navigating to a new page, use a ``
- if taking an action on the current page use a ``
Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions
or show/hide additional form options.
## Sizes
There are 2 sizes for the component: default and small.
Default uses `text-base` and small uses `text-xs`
## With icons
Text Links/buttons can have icons on left or the right.
To indicate a new or add action, the icon on is used on the
left.
An angle icon, , is used on the left to indicate an expand to
show/hide additional content.
## Accessibility
Make sure to only use the Link on backgrounds that maintain the WCAG color contrast ratios.