Typography
This page has not yet been finished and is being worked on. In the meantime, you can view the stories.
Text
This is text
import * as React from 'react';
import { Text } from '@itwin/itwinui-react';
export default () => {
return <Text variant='body'>This is text</Text>;
};
Props
| Prop | Description | Default |
|---|---|---|
| variant | Which typography variant/size should be used for the styling? 'headline' = h1, 'title' = h2, 'subheading' = h3, 'leading' = h4, 'body' = normal paragraph text, 'small' = smaller text "body" | "small" | "title" | "headline" | "subheading" | "leading" | 'body' |
| isMuted | Show text in muted style. boolean | false |
| isSkeleton | Use it if you are still loading the content. boolean | false |
| as | "symbol" | "object" | "div" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 158 more ... | FunctionComponent<...> |
Label
This page has not yet been finished and is being worked on. In the meantime, you can view the stories.
import * as React from 'react';
import { Label } from '@itwin/itwinui-react';
export default () => {
return <Label>This is label.</Label>;
};
Props
| Prop | Description | Default |
|---|---|---|
| displayStyle | Set the display style of the label.
- 'block' - default, no extra spacing (label and input will be on separate lines)
- 'inline' - label gets a right margin so it can be placed inline "block" | "inline" | 'block' |
| required | Set to true if the label's associated input is required.
This adds an asterisk next to the label text. boolean | |
| disabled | Adds disabled styling to a label. boolean | false |
| as | "symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | FunctionComponent<...> |