Demo
Dapper UI is amazing!
Color
1
2
3<Text>
Dapper UI is amazing!
</Text>import { Text } from "@dapper-ui/core";1
2
3<Text>
Dapper UI is amazing!
</Text>'highest' | 'higher' | 'high' | 'base' | 'low' | 'lower' | 'lowest' | undefined'base'The contrast of the text.
Uses different shades of the color to achieve the desired contrast. The used shade depends on whether or not dark mode is enabled.
string | undefined'neutral'The color of the text.
Default to the neutral color shade.
'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl''base'The size of the text.
'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black''normal'The font weight of the text.
Please note that not all fonts support all weights, in which case the closest weight will be used by the browser.
'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | undefinedundefinedThe line height of the text.
'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | string'span'The HTML tag to use for the text.
This does not affect the styling of the text, but should be set for semantic reasons to improve accessibility and SEO.
Defaults to span.
booleanfalseWhether or not to use the width of the text should be limited to about 65 characters. This improves readability of longer texts that span multiple lines.
Requires a non-inline style (e.g., by setting the tag to div).
Defaults to false.
booleanfalseWhether or not to truncate the text to a single line (using the ellipsis overflow style).
string | undefinedundefinedCustom CSS styles to apply.
Especially useful for positioning styles like margings.