Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Format Byte

Used to format bytes to a human-readable format

SourceStorybookArk

File size: 1.45 kB

Usage

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

Examples

Sizes

The format functions works for any size of bytes.

50 byte

5 kB

5 MB

5 GB

Format Bits

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

File size: 1.45 kb

Locale

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

de-DE

1,45 kB

zh-CN

1.45 kB

Unit Display

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

50.3kB

50.3 kB

50.3 kilobytes

Props

PropDefaultType
value *
number

The byte size to format

unit
'bit' | 'byte'

The unit granularity to display

unitDisplay
'long' | 'short' | 'narrow'

The unit display

Previous

FormatNumber

Next

LocaleProvider