mixin view-badge 
    +view('badge', 'Badge')
        .c-box
            +badge(size='sm' href='#')= '50'
            = ' '
            +badge= '100'
            = ' '
            +badge(size='lg' href='#')= '200'
            = ' '
            +badge(size='xl' href='#')= '300'

        .c-box
            +badge(size='sm' href='#' quiet=true)= '50'
            = ' '
            +badge(quiet=true)= '100'
            = ' '
            +badge(size='lg' href='#' quiet=true)= '200'
            = ' '
            +badge(size='xl' href='#' quiet=true)= '300'

        each theme in ['accent', 'positive', 'negative', 'warning']
            .c-box
                +badge(theme)(size='sm' href='#')= 'new'
                = ' '
                +badge(theme)= 'new'
                = ' '
                +badge(theme)(size='lg' href='#')= 'new'
                = ' '
                +badge(theme)(size='xl' href='#')= 'new'

            .c-box
                +badge(theme)(size='sm' href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(quiet=true)= 'new'
                = ' '
                +badge(theme)(size='lg' href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(size='xl' href='#' quiet=true)= 'new'

        .c-box
            +badge(size='sm', pill=true)= '50'
            = ' '
            +badge(pill=true)= '100'
            = ' '
            +badge(size='lg' pill=true)= '200'
            = ' '
            +badge(size='xl' pill=true)= '300'

        .c-box
            +badge(size='sm' pill=true quiet=true)= 'new'
            = ' '
            +badge(pill=true quiet=true)= 'new'
            = ' '
            +badge(size='lg' pill=true quiet=true)= 'new'
            = ' '
            +badge(size='xl' pill=true quiet=true)= 'new'

        each theme in ['accent', 'positive', 'negative', 'warning']
            .c-box
                +badge(theme)(size='sm' pill=true href='#')= 'new'
                = ' '
                +badge(theme)(pill=true)= 'new'
                = ' '
                +badge(theme)(size='lg' pill=true href='#')= 'new'
                = ' '
                +badge(theme)(size='xl' pill=true href='#')= 'new'

            .c-box
                +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(pill=true quiet=true)= 'new'
                = ' '
                +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new'