Button

Source API

The Button component in Punica CSS Framework is a versatile element designed for triggering actions or navigating users. It supports various styles, sizes, and states, allowing seamless customization to suit different use cases. To apply this component, add the .button class to an a or button element.

Default

Active

Disabled

Inactive

Preloader

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

<button class="button"></button>
<button class="active button"></button>
<a class="primary button"></a>
<div class="preloader button">Text</div>
<button class="disabled button"></button>
<button class="inactive button"></button>
<button class="rounded button"></button>

Add the .tiny, .mini, .small, .large or .huge class to a button to make it smaller or larger. Also, you can add the .block class for a full-width button.

Tiny Mini Small Default Large Huge

Block Button

<button class="tiny button"></button>
<a class="large primary button"></a>

To create a button group, add the .buttons class to a div element around the buttons.

Button

person

254

thumb_up

276

edit clear

lock

shopping_cart

$175

Checkout Now !

keyboard_arrow_left 1 2 3 ... 56 57 58 keyboard_arrow_right

<div class="buttons">
    <button class="button">
        Button
    </button>
    <a href="" class="active button">
        Button
    </a>
    <button class="button">
        Button
    </button>
</div>

Also, add the .tiny, .mini, .small, .large or .huge class to .buttons to make it smaller or larger group buttons.

Mini

Large

<div class="mini buttons">
    <button class="button">
        Button
    </button>
    <a href="" class="active button">
        Button
    </a>
    <button class="button">
        Button
    </button>
</div>

And you can add the .block class to .buttons for a full-width button group.

Button Button Button

<div class="block buttons">
    <button class="button">
        Button
    </button>
    <a href="" class="active button">
        Button
    </a>
    <button class="button">
        Button
    </button>
</div>

A button can be used to trigger a dropdown menu.

Dropdown

drafts Mini

254

drafts

254

drafts

You can change the direction of the dropdown by adding any .right .left .top .top.left .top.right .bottom.left .bottom.right classes to .dropdown container.

<div class="buttons">
	<div class="top left dropdown">
		<a class="toggle button">
			...
		</a>
		<ul class="menu">
			...
		</ul>
	</div>
</div>

Also, just add the .vertical class to .buttons to make it vertical button group.

<div class="vertical buttons">
	<button class="button">
                ..
	</button>
	<button class="button">
		..
	</button>
</div>

Props
Default Class Name	Combinators
`buttons`	`.buttons`
`button`	`.button` `.buttons > .button`
Styles	Combinators
`primary`	`.primary.button` `.primary.buttons`
`success`	`.success.button` `.success.buttons`
`warning`	`.warning.button` `.warning.buttons`
`error`	`.error.button` `.error.buttons`
`dark`	`.dark.button` `.dark.buttons`
`outlined`	`.outlined.button`
Sizes	Combinators
`tiny`	`.tiny.button` `.tiny.buttons`
`mini`	`.mini.button` `.mini.buttons`
`small`	`.small.button` `.small.buttons`
`large`	`.large.button` `.large.buttons`
`huge`	`.huge.button` `.huge.buttons`
States	Combinators
`active`	`.active.button`
`inactive`	`.inactive.button`
`disabled`	`.disabled.button`
`block`	`.block.button` `.block.buttons`
`vertical`	`.vertical.buttons`
`preloader`	`.preloader.button`
Dropdown	Combinators
`dropdown`	`.dropdown` `.buttons > dropdown`
`right`	`.right.dropdown`
`left`	`.left.dropdown`
`top`	`.top.dropdown`
`bottom`	`.bottom.dropdown`
`toggle`	`.dropdown > .button.toggle`
`clickable`	`.clickable.dropdown`