```js
const { Button } = require('../Button');
const text =
  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ipsam illum eius sunt, nesciunt eveniet possimus dicta dolor qui aut facilis quos ad dolore. Unde laboriosam sint ex dignissimos alias.';

<>
  <Button
    onClick={() => setState({ light: !state.light })}
    size="small"
    intent="primary"
  >
    Toggle light
  </Button>{' '}
  <Button
    onClick={() => setState({ bold: !state.bold })}
    size="small"
    intent="primary"
  >
    Toggle bold
  </Button>{' '}
  <Button
    onClick={() => setState({ block: !state.block })}
    size="small"
    intent="primary"
  >
    Toggle block
  </Button>
  <hr />
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="small"
    intent="default"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="small"
    intent="primary"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="small"
    intent="success"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="small"
    intent="info"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="small"
    intent="warning"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="small"
    intent="danger"
  >
    {text}
  </Text>
  <br />
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    intent="default"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    intent="primary"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    intent="success"
  >
    {text}
  </Text>
  <Text bold={state.bold} block={state.block} light={state.light} intent="info">
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    intent="warning"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    intent="danger"
  >
    {text}
  </Text>
  <br />
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="large"
    intent="default"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="large"
    intent="primary"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="large"
    intent="success"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="large"
    intent="info"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="large"
    intent="warning"
  >
    {text}
  </Text>
  <Text
    bold={state.bold}
    block={state.block}
    light={state.light}
    size="large"
    intent="danger"
  >
    {text}
  </Text>
</>;
```

It also supports direct font size setting.

```jsx
<Text intent="danger" fontSize={42}>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ipsam illum
  eius sunt, nesciunt eveniet possimus dicta dolor qui aut facilis quos ad
  dolore. Unde laboriosam sint ex dignissimos alias.
</Text>
```