@hixme-ui/text

hixme-ui text component. For all your communictation needs.

Usage no npm install needed!

<script type="module">
  import hixmeUiText from 'https://cdn.skypack.dev/@hixme-ui/text';
</script>

README

Text

npm i --save @hixme-ui/text

View it live

Usage

import Text, {
 TextLink,
 HyperLink,
 Paragraph,
 Label,
} from '@hixme-ui/text'

// text success
<Text success>I said good day sir!</Text>

// paragraph warning
<Text p warning>Are you sure?</Text>
<Paragraph warning>Are you sure?</Paragraph>

Props

Category Name Type
Tags
a bool
div bool
label bool
p bool
States
defaultColor bool
primary bool
success bool
warning bool
error bool
muted bool
Colors
color string
white bool
black bool
red bool
blue bool
purple bool
yellow bool
green bool
light bool
lighter bool
Font Sizes
fontSize string
default bool
smallest bool
smaller bool
small bool
medium bool
large bool
larger bool
jumbo bool
Font Weights
fontWeight string
thinnest bool
thinner bool
thin bool
normal bool
bold bool
bolder bool
boldest bool
Text Align
left bool
center bool
right bool
Text Decoration
dashed bool
Transforms
uppercase bool
lowercase bool
capitalize bool
Other
cursor string
display string
fontFamily string
href string
justifyContent string
lineHeight string
onClick string
textIndent string
textOverflow string
userSelect string
whiteSpace string
wordBreak string

TextLink and HyperLink

These components default to using the <a /> tag as it's rendered form. HyperLink goes one step further in defaulting to a cursor pointer and a default primary color

import { TextLink, HyperLink } from '@hixme-ui/text'

<TextLink href='#point1' />

<HyperLink href='https://goingsomewhere.com' />