Tailwind CSS Button

Create engaging CTAs with the button component in David UI. Styled with Tailwind CSS, it offers various states, sizes, and designs for all types of actions. They are fully customizable and responsive.

See our free component examples below that will help you seamlessly integrate buttons into your Tailwind CSS web applications.

Basic Button

Discover a versatile button with a dark background, white text, and rounded corners. It changes color on hover, showcasing an interactive design.

Button Variants

Explore buttons in various styles, including ghost, outline, solid, and gradient, to suit different design needs.

Button Sizes

Design buttons in multiple sizes, such as small, medium, and large, using this example to fit your interface requirements.

Button Colors

Create buttons in a range of colors, including primary, secondary, info, success, warning, and error, each representing a specific action or state.

Button With Icon

Improve your buttons with icons for added context. This example uses Iconoir icons, but any icon set can be applied.

Block Level Button

Make buttons span the entire width of a container by rendering them as block-level elements using the w-full class. This example demonstrates block-level buttons in styles like ghost, outline, solid, and gradient.

Pill Button

Design pill-shaped buttons with styles such as ghost, outline, solid, and gradient. Use the rounded-full class to achieve the pill shape.

Button As Link

Transform buttons into clickable links by using the a tag instead of the button tag. This example illustrates buttons in styles like ghost, outline, solid, and gradient functioning as links.

Ghost Outline Solid Gradient

Button with Loading State

Create buttons with a loading state using the animate-spin class. This example includes a loading spinner implemented with an SVG element inside the button.

Custom Auth Button

Leverage Tailwind CSS classes to design buttons for authentication purposes, including examples customized for social media and Web 3.0 integrations.

Required Script

To enable the ripple effect for buttons, include the provided script file at the bottom of your HTML document. If you prefer buttons without the ripple effect, this step is optional.