Format Bytes

npm2.0.0

The format-bytes component is used to display byte values in a human-readable format with automatic unit conversion (b, kb, mb, gb, tb, pb).

Example

Formats and displays file sizes in human-readable format.

1024

1048576

1073741824

code

<script type="module">
  import '@blueprintui/components/include/format-bytes.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-bytes>1024</bp-format-bytes>

  <bp-format-bytes>1048576</bp-format-bytes>

  <bp-format-bytes>1073741824</bp-format-bytes>
</div>

Binary Display

Demonstrates formatting with decimal vs binary display modes.

1024

code

<script type="module">
  import '@blueprintui/components/include/format-bytes.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-bytes display="decimal">1024</bp-format-bytes>

  <bp-format-bytes display="binary">1024</bp-format-bytes>
</div>

Specific Unit

Shows formatting with specific unit constraints like KB, MB, or GB.

1048576

code

<script type="module">
  import '@blueprintui/components/include/format-bytes.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-bytes unit="kb">1048576</bp-format-bytes>

  <bp-format-bytes unit="mb">1048576</bp-format-bytes>

  <bp-format-bytes unit="gb">1048576</bp-format-bytes>
</div>

Unit Display

Demonstrates short vs long unit display formats.

1048576

code

<script type="module">
  import '@blueprintui/components/include/format-bytes.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-bytes unit-display="short">1048576</bp-format-bytes>

  <bp-format-bytes unit-display="long">1048576</bp-format-bytes>
</div>

Precision

Shows precision control with fraction digit settings.

1234567

code

<script type="module">
  import '@blueprintui/components/include/format-bytes.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-bytes maximum-fraction-digits="0">1234567</bp-format-bytes>

  <bp-format-bytes maximum-fraction-digits="2">1234567</bp-format-bytes>

  <bp-format-bytes minimum-fraction-digits="3" maximum-fraction-digits="3">1234567</bp-format-bytes>
</div>

Text

Demonstrates inline formatting within text content.

The file size is1048576which is quite large.

code

<script type="module">
  import '@blueprintui/components/include/format-bytes.js';
</script>

<p bp-text="content">The file size is <bp-format-bytes>1048576</bp-format-bytes> which is quite large.</p>

Install

NPM

// npm package
import '@blueprintui/components/include/format-bytes.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/format-bytes.js/+esm';
</script>

bp-format-bytes

Properties

Name	Types	Description
`display`	`'decimal' \| 'binary'`	determines the base unit system: 'decimal' (1000-based) or 'binary' (1024-based)
`unit`	`'b' \| 'kb' \| 'mb' \| 'gb' \| 'tb' \| 'pb'`	force a specific unit instead of auto-detection (b, kb, mb, gb, tb, pb)
`unitDisplay`	`'long' \| 'short'`	determines how units are displayed: 'short' (kb), 'long' (kilobytes)
`locales`	`string[]`	locales to use for number formatting
`minimumFractionDigits`	`number`	minimum number of fraction digits to display
`maximumFractionDigits`	`number`	maximum number of fraction digits to display
`value`	`number`	Defines the numeric byte value to be formatted and displayed

Attributes

Name	Types	Description
`display`	`'decimal' \| 'binary'`	determines the base unit system: 'decimal' (1000-based) or 'binary' (1024-based)
`unit`	`'b' \| 'kb' \| 'mb' \| 'gb' \| 'tb' \| 'pb'`	force a specific unit instead of auto-detection (b, kb, mb, gb, tb, pb)
`unit-display`	`'long' \| 'short'`	determines how units are displayed: 'short' (kb), 'long' (kilobytes)
`locales`	`string[]`	locales to use for number formatting
`minimum-fraction-digits`	`number`	minimum number of fraction digits to display
`maximum-fraction-digits`	`number`	maximum number of fraction digits to display
`value`	`number`	Defines the numeric byte value to be formatted and displayed