Format Bytes
<wa-format-bytes>
Formats a number of bytes as a human-readable string with the appropriate unit, such as kB, MB, or GB. Supports both byte and bit units with configurable locale.
Examples
Formatting Bytes
Set the value attribute to a number to get the value in bytes.
Formatting Bits
To get the value in bits, set the unit attribute to bit.
Localization
Use the lang attribute to set the number formatting locale.
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/format-bytes/format-bytes.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/format-bytes/format-bytes.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/format-bytes/format-bytes.js';
To import this component for React 18 or below, use the following code:
import WaFormatBytes from '@awesome.me/webawesome/dist/react/format-bytes/index.js';
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefined |
||
displaydisplay |
Determines how to display the result, e.g. "100 bytes", "100 b", or "100b".
Type
'long' | 'short' | 'narrow'Default
'short' |
||
unitunit |
The type of unit to display.
Type
'byte' | 'bit'Default
'byte' |
||
valuevalue |
The number to format in bytes.
Type
numberDefault
0 |