VaneUI
Typography Components
Link
Renders an accessible and themeable anchor link for navigation. Use this to direct users to other pages or external websites.
Basic Link
Default link styling.
BasicLink.tsx
<Link href="#basic-link">This is a Basic Link</Link>Link Sizes
Links come in different sizes.
Link Font Weights
Links support different font weights.
LinkFontWeights.tsx
<Row flexWrap>
<Link href="#thin-link" thin>Link thin</Link>
<Link extralight href="#extralight-link">Link extralight</Link>
<Link href="#light-link" light>Link light</Link>
<Link href="#normal-link" normal>Link normal</Link>
<Link href="#medium-link" medium>Link medium</Link>
<Link href="#semibold-link" semibold>Link semibold</Link>
<Link bold href="#bold-link">Link bold</Link>
<Link extrabold href="#extrabold-link">Link extrabold</Link>
<Link black href="#black-link">Link black</Link>
</Row>Link Appearances
Links can have different color appearances.
LinkAppearances.tsx
<Row flexWrap>
<Link default href="#default-link">Link default</Link>
<Link accent href="#accent-link">Link accent</Link>
<Link href="#primary-link" primary>Link primary</Link>
<Link href="#secondary-link" secondary>Link secondary</Link>
<Link href="#tertiary-link" tertiary>Link tertiary</Link>
<Link href="#success-link" success>Link success</Link>
<Link danger href="#danger-link">Link danger</Link>
<Link href="#warning-link" warning>Link warning</Link>
<Link href="#info-link" info>Link info</Link>
</Row>Link Font Families
Links support different font families.
LinkFontFamilies.tsx
<Row flexWrap>
<Link href="#sans-link" sans>Link sans</Link>
<Link href="#serif-link" serif>Link serif</Link>
<Link href="#mono-link" mono>Link mono</Link>
</Row>Link Text Decorations
Links support different text decorations.
LinkTextDecorations.tsx
<Row flexWrap>
<Link href="#underline-link" underline>Link underline</Link>
<Link href="#lineThrough-link" lineThrough>Link lineThrough</Link>
<Link href="#noUnderline-link" noUnderline>Link noUnderline</Link>
<Link href="#overline-link" overline>Link overline</Link>
</Row>Link Font Styles
Links support different font styles.
LinkFontStyles.tsx
<Row flexWrap>
<Link href="#italic-link" italic>Link italic</Link>
<Link href="#notItalic-link" notItalic>Link notItalic</Link>
</Row>Link Transformations
Links support different case transformations.
LinkTransformations.tsx
<Row flexWrap>
<Link href="#uppercase-link" uppercase>Link uppercase</Link>
<Link href="#lowercase-link" lowercase>Link lowercase</Link>
<Link capitalize href="#capitalize-link">Link capitalize</Link>
<Link href="#normalCase-link" normalCase>Link normalCase</Link>
</Row>Link Alignment
Links can be aligned differently.
LinkAlignment.tsx
<Col className="border-2 border-dashed border-gray-300 p-4 min-w-80">
<Link className="w-full" href="#left-link" textLeft>Left Aligned</Link>
<Link className="w-full" href="#center-link" textCenter>Center Aligned</Link>
<Link className="w-full" href="#right-link" textRight>Right Aligned</Link>
</Col>Link Combinations
Combining multiple link properties.
LinkCombinations.tsx
<Col>
<Link bold href="#combo1" lg primary>Large Bold Primary Link</Link>
<Link href="#combo2" italic secondary sm>Small Italic Secondary Link</Link>
<Link href="#combo3" md semibold success underline>Medium Semibold Success Underlined Link</Link>
<Link href="#combo4" light uppercase xs>Extra Small Light Uppercase Link</Link>
<Link danger extrabold href="#combo5" textCenter xl>Extra Large Extra Bold Danger Centered Link</Link>
</Col>