Back to Chakra Ui

Format Byte

apps/www/content/docs/components/format-byte.mdx

0.3.0-beta730 B
Original Source
<ExampleTabs name="format-byte-basic" />

Usage

jsx
import { FormatByte } from "@chakra-ui/react"
jsx
<FormatByte value={1000} />

Examples

Sizes

The format functions works for any size of bytes.

<ExampleTabs name="format-byte-sizes" />

Format Bits

Use the unit prop to change the byte format to bits.

<ExampleTabs name="format-byte-with-unit" />

Locale

Wrap the FormatByte component within the LocaleProvider to change the locale.

<ExampleTabs name="format-byte-with-locale" />

Unit Display

Use the unitDisplay prop to change the byte format to compact notation.

<ExampleTabs name="format-byte-with-unit-display" />

Props

<PropTable component="Format" part="Byte" />