Skip to content


<SFragment> is a utility component that allows you to wrap some component with another component based on conditions.


Import <SFragment> component and wrap it around with other component. Specify :is prop to define the component to be used. When :is prop is not defined, it will render the underlining component directly.

This component is useful in a case for example you want to wrap some component with <STooltip> only when some props are passed.

<script setup lang="ts">
import { ref } from 'vue'
import SButton from '@globalbrain/sefirot/lib/components/SButton.vue'
import STooltip from '@globalbrain/sefirot/lib/components/STooltip.vue'
import SButton from '@globalbrain/sefirot/lib/components/SFragment.vue'

const tooltip = ref('')

    Wrap component with `<SToooltip>` only when tooltip ref
    is set. Otherwise, it will render `<SButton>` directly.
  <SFragment :is="tooltip && STooltip" :text="tooltip">
    <SButton label="Button" />

Note that <SFragment> will pass down all additional props defined along with :is, for example in the above case :text is passed to <STooltip>.


Here are the list of props you may pass to the component.


The component to be used to wrap the children. When this prop is not defined, it will render the children directly.

interface Props {
  is?: any
<SFragment :is="STooltip">