Components
Version 2.0

Button group

Muestra un diálogo de alerta con un mensaje opcional, y aguardará hasta que el usuario cierre la ventana de diálogo.

Import

Example code
import ButtonGroup from 'components/@ui/button-group'

Usage

Example code
<Button.Group>

  <Button color="primary">

    Javascript

  </Button>

  <Button color="primary">

    React

  </Button>

  <Button color="primary">

    Svelte

  </Button>

</Button.Group>

With icons

Example code
<Button.Group>

  <Button color='primary'>

    <svg 

      xmlns="http://www.w3.org/2000/svg" 

      width={18} 

      height={18} 

      viewBox="0 0 24 24" 

      fill="none" 

      stroke="currentColor" 

      strokeWidth="2" 

      strokeLinecap="round" 

      strokeLinejoin="round"

      >

        <rect x="3" y="3" width="18" height="18" rx="2"/>

        <circle cx="8.5" cy="8.5" r="1.5"/>

        <path d="M20.4 14.5L16 10 4 20"/>

    </svg>

    <span>Photos</span>

  </Button>

  <Button color='primary'>

    <svg 

      xmlns="http://www.w3.org/2000/svg" 

      width={18} 

      height={18} 

      viewBox="0 0 24 24" 

      fill="none" 

      stroke="currentColor" 

      strokeWidth="2" 

      strokeLinecap="round" 

      strokeLinejoin="round"

      >

        <path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z"/>

        <path d="M13 3v6h6"/>

    </svg>

    <span>Documents</span>

  </Button>

  <Button color='primary'>

    <svg 

      xmlns="http://www.w3.org/2000/svg" 

      width={18} 

      height={18} 

      viewBox="0 0 24 24" 

      fill="none" 

      stroke="currentColor" 

      strokeWidth="2" 

      strokeLinecap="round" 

      strokeLinejoin="round"

      >

        <path d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z"/>

      </svg>

    <span>Videos</span>

  </Button>

</Button.Group>