Prism Docs

Space

Set spacing between inline components.

Basic Usage

Default horizontal spacing.

<prism-space size="middle">
  <prism-button label="Item 1"/>
  <prism-button label="Item 2"/>
  <prism-button label="Item 3"/>
</prism-space>

Vertical

Vertical spacing between elements.

<prism-space direction="vertical" size="large">
  <prism-button label="Item 1"/>
  <prism-button label="Item 2"/>
</prism-space>

Sizes

Toggle between small, middle, and large sizes.

<prism-radio-group [ngModel]="currentSize()" (ngModelChange)="currentSize.set($event)">
  <prism-radio value="small">Small</prism-radio>
  <prism-radio value="middle">Middle</prism-radio>
  <prism-radio value="large">Large</prism-radio>
</prism-radio-group>

<prism-space [size]="currentSize()">
  <prism-button label="Button"/>
  <prism-button label="Button"/>
  <prism-button label="Button"/>
</prism-space>

Alignment

Set vertical alignment of items.

Center Align:
Block
<prism-space align="center" class="bg-slate-50 p-4">
  Center Align:
  <prism-button label="Button"/>
  <div class="h-16 w-16 bg-primary-500 rounded flex items-center justify-center text-white">Block</div>
</prism-space>

Wrap

Automatic wrapping for multiple lines.

<prism-space [wrap]="true" size="middle">
  @for (i of [1,2,3,4,5,6,7,8,9,10]; track i) {
    <prism-button label="Button {{i}}"/>
  }
</prism-space>

Split

Insert dividers between items using the split template.

<ng-template #divider>
  <prism-divider type="vertical"></prism-divider>
</ng-template>

<prism-space [split]="divider">
  <ng-template prismSpaceItem>
    <prism-button label="Link 1"/>
  </ng-template>
  <ng-template prismSpaceItem>
    <prism-button label="Link 2"/>
  </ng-template>
  <ng-template prismSpaceItem>
    <prism-button label="Link 3"/>
  </ng-template>
</prism-space>

prism-space

NameTypeDefaultDescription
direction'horizontal' | 'vertical''horizontal'The spacing direction.
size'small' | 'middle' | 'large' | number'small'The gap size preset or custom number (px).
wrapbooleanfalseWhether to wrap items.
align'start' | 'end' | 'center' | 'baseline' | 'stretch'-Alignment of items (CSS align-items).
splitTemplateRef<void>-Template for the divider between items.