feat: make flowbite-button usable as directive #109
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request introduces comprehensive documentation and implementation for the Button component in the Flowbite Angular library. It adds multiple new components and documentation files that showcase various button styles, including default, pill, gradient, outline, icon, label, and disabled button configurations. The changes involve creating new Angular components, HTML templates, and updating the documentation structure to provide a detailed, interactive guide for developers using the Flowbite Button component. Changes
Sequence DiagramsequenceDiagram
participant Developer
participant ButtonComponent
participant ButtonTemplate
Developer->>ButtonComponent: Configure button
ButtonComponent->>ButtonTemplate: Apply styles
ButtonTemplate-->>Developer: Render styled button
Note over ButtonComponent: Supports multiple styles:
Note over ButtonComponent: - Colors
Note over ButtonComponent: - Gradients
Note over ButtonComponent: - Sizes
Note over ButtonComponent: - Icons
Note over ButtonComponent: - Pill shape
Possibly related PRs
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
MGREMY
merged commit f6189ab
into
feature-make-component-available-as-directive
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (12)
apps/docs/docs/components/button/directive/_disabled.component.ts (1)
1-13: Consider creating a base component for demo buttons.Since all demo button components share the same structure and configuration, consider creating a base component to reduce code duplication. This would make maintenance easier and ensure consistency across all demo components.
Example implementation:
// base-demo-button.component.ts import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ButtonComponent } from 'flowbite-angular/button'; @Component({ template: '', standalone: true, imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'flex flex-wrap flex-row gap-3', }, }) export class BaseDemoButtonComponent {} // _pill.component.ts example @Component({ selector: 'flowbite-demo-button-pill', templateUrl: './_pill.component.html', }) export class FlowbitePillComponent extends BaseDemoButtonComponent {}apps/docs/docs/components/button/directive/_size.component.ts (1)
5-13: Consider adding ChangeDetectionStrategy.OnPush.Since this is a presentational component with no internal state or data bindings, it would benefit from OnPush change detection strategy for better performance.
-import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'flowbite-demo-button-size', imports: [ButtonComponent], templateUrl: './_size.component.html', host: { class: 'flex flex-wrap flex-row gap-3 items-center', }, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FlowbiteSizeComponent {}apps/docs/docs/components/button/directive/_gradient-outline.component.ts (1)
5-13: Consider adding ChangeDetectionStrategy.OnPush.For consistency with other components and performance optimization.
-import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'flowbite-demo-button-gradient-outline', imports: [ButtonComponent], templateUrl: './_gradient-outline.component.html', host: { class: 'flex flex-wrap flex-row gap-3', }, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FlowbiteGradientOutlineComponent {}apps/docs/docs/components/button/directive/_gradient-duotone.component.ts (1)
5-13: Consider adding ChangeDetectionStrategy.OnPush.For consistency with other components and performance optimization.
-import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'flowbite-demo-button-gradient-duotone', imports: [ButtonComponent], templateUrl: './_gradient-duotone.component.html', host: { class: 'flex flex-wrap flex-row gap-3', }, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FlowbiteGradientDuotoneComponent {}apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts (2)
5-13: Consider adding ChangeDetectionStrategy.OnPush.For consistency with other components and performance optimization.
-import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'flowbite-demo-button-gradient-monochrome', imports: [ButtonComponent], templateUrl: './_gradient-monochrome.component.html', host: { class: 'flex flex-wrap flex-row gap-3', }, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FlowbiteGradientMonochromeComponent {}
1-13: Consider extracting common configuration to a shared constant or base class.All button demo components share the same host class configuration. Consider extracting this to a shared constant or base class to improve maintainability and reduce duplication.
Example approach using a shared constant:
// shared/constants/layout.ts export const FLEX_ROW_WRAP_LAYOUT = 'flex flex-wrap flex-row gap-3'; // Then in each component: @Component({ // ... host: { class: FLEX_ROW_WRAP_LAYOUT, }, })Or using a base class:
// shared/base/demo-component.base.ts @Component({ template: '', host: { class: 'flex flex-wrap flex-row gap-3', }, changeDetection: ChangeDetectionStrategy.OnPush, }) export abstract class DemoComponentBase {} // Then in each component: @Component({ // ... other metadata }) export class FlowbiteGradientMonochromeComponent extends DemoComponentBase {}apps/docs/docs/components/button/ng-doc.page.ts (1)
2-23: Consider grouping related imports.The import structure is clear with the c_ and d_ prefixes, but could be improved by grouping related imports together.
Consider organizing imports into groups:
import ComponentCategory from '../ng-doc.category'; + // Component imports import { FlowbiteDefaultComponent as c_default } from './component/_default.component'; [... other component imports ...] + // Directive imports import { FlowbiteDefaultComponent as d_default } from './directive/_default.component'; [... other directive imports ...] import type { NgDocPage } from '@ng-doc/core';apps/docs/docs/components/button/directive/_default.component.html (1)
1-31: Enhance accessibility with descriptive labels.While the button labels are generally descriptive, consider adding aria-labels for buttons with abstract color names (e.g., "Purple") to better convey their purpose to screen readers.
Example improvement for the "Purple" button:
<button flowbite-button - color="purple"> + color="purple" + aria-label="Custom action button"> Purple </button>apps/docs/docs/components/button/directive/_pill.component.html (1)
1-36: Maintain consistency with accessibility improvements.Apply the same accessibility enhancements suggested for the default buttons to maintain consistency across all button variants.
Example improvement:
<button flowbite-button [isPill]="true" - color="yellow"> + color="yellow" + aria-label="Warning action"> Warning </button>apps/docs/docs/components/button/directive/_gradient-monochrome.component.html (1)
1-40: Consider using consistent naming convention for button labels.Some buttons use semantic names (Info, Success, Failure) while others use color names (Cyan, Teal, Pink). Consider standardizing to either all semantic names or all color names for better consistency.
Example standardization to semantic names:
- Cyan + Info - Teal + Secondary - Lime + Success - Pink + Warning - Purple + Primaryapps/docs/docs/components/button/index.md (1)
44-44: Fix spelling inconsistency in "duo-tone".The term should be "duotone" (one word) for consistency with common usage and the component names.
-## Gradient duo-tone +## Gradient duotoneAlso applies to: 46-46
apps/docs/docs/components/button/component.md (1)
47-47: Fix spelling inconsistency in "duo-tone".The term should be "duotone" (one word) for consistency with common usage and the component names.
-## Gradient duo-tone +## Gradient duotoneAlso applies to: 49-49
🧰 Tools
🪛 LanguageTool
[misspelling] ~47-~47: This word is normally spelled as one.
Context: ...me" name="typescript" ``` ## Gradient duo-tone {{ NgDocActions.demo('c_gradient_duoto...(EN_COMPOUNDS_DUO_TONE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (27)
apps/docs/docs/components/button/component.md(1 hunks)apps/docs/docs/components/button/directive/_default.component.html(1 hunks)apps/docs/docs/components/button/directive/_default.component.ts(1 hunks)apps/docs/docs/components/button/directive/_disabled.component.html(1 hunks)apps/docs/docs/components/button/directive/_disabled.component.ts(1 hunks)apps/docs/docs/components/button/directive/_gradient-duotone.component.html(1 hunks)apps/docs/docs/components/button/directive/_gradient-duotone.component.ts(1 hunks)apps/docs/docs/components/button/directive/_gradient-monochrome.component.html(1 hunks)apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts(1 hunks)apps/docs/docs/components/button/directive/_gradient-outline.component.html(1 hunks)apps/docs/docs/components/button/directive/_gradient-outline.component.ts(1 hunks)apps/docs/docs/components/button/directive/_icon-only.component.html(1 hunks)apps/docs/docs/components/button/directive/_icon-only.component.ts(1 hunks)apps/docs/docs/components/button/directive/_icon.component.html(1 hunks)apps/docs/docs/components/button/directive/_icon.component.ts(1 hunks)apps/docs/docs/components/button/directive/_label.component.html(1 hunks)apps/docs/docs/components/button/directive/_label.component.ts(1 hunks)apps/docs/docs/components/button/directive/_outline.component.html(1 hunks)apps/docs/docs/components/button/directive/_outline.component.ts(1 hunks)apps/docs/docs/components/button/directive/_pill.component.html(1 hunks)apps/docs/docs/components/button/directive/_pill.component.ts(1 hunks)apps/docs/docs/components/button/directive/_size.component.html(1 hunks)apps/docs/docs/components/button/directive/_size.component.ts(1 hunks)apps/docs/docs/components/button/index.md(1 hunks)apps/docs/docs/components/button/ng-doc.page.ts(2 hunks)apps/docs/docs/shared/component-deprecated-usage.md(1 hunks)libs/flowbite-angular/button/button.component.ts(2 hunks)
✅ Files skipped from review due to trivial changes (6)
- apps/docs/docs/components/button/directive/_disabled.component.html
- apps/docs/docs/components/button/directive/_outline.component.html
- apps/docs/docs/components/button/directive/_label.component.html
- apps/docs/docs/shared/component-deprecated-usage.md
- apps/docs/docs/components/button/directive/_size.component.html
- apps/docs/docs/components/button/directive/_icon.component.html
🧰 Additional context used
🪛 LanguageTool
apps/docs/docs/components/button/component.md
[misspelling] ~47-~47: This word is normally spelled as one.
Context: ...me" name="typescript" ``` ## Gradient duo-tone {{ NgDocActions.demo('c_gradient_duoto...
(EN_COMPOUNDS_DUO_TONE)
apps/docs/docs/components/button/index.md
[misspelling] ~42-~42: This word is normally spelled as one.
Context: ...me" name="typescript" ``` ## Gradient duo-tone {{ NgDocActions.demo('d_gradient_duoto...
(EN_COMPOUNDS_DUO_TONE)
🔇 Additional comments (10)
apps/docs/docs/components/button/directive/_default.component.ts (1)
5-12: Same improvements needed as in FlowbitePillComponent.This component has the same configuration issues as the pill component.
apps/docs/docs/components/button/directive/_outline.component.ts (1)
5-12: Same improvements needed as in FlowbitePillComponent.This component has the same configuration issues as the pill component.
apps/docs/docs/components/button/directive/_disabled.component.ts (1)
5-12: Same improvements needed as in FlowbitePillComponent.This component has the same configuration issues as the pill component.
apps/docs/docs/components/button/ng-doc.page.ts (1)
34-59: LGTM! Well-structured documentation configuration.The documentation setup is comprehensive, covering both component and directive implementations with consistent naming conventions.
libs/flowbite-angular/button/button.component.ts (2)
99-103: LGTM! Selector enhancement improves component flexibility.The expanded selector allows the component to be used both as a standalone component and as a directive on button/anchor elements, which aligns with Angular best practices.
118-118: Consider accessibility implications of static button type.While simplifying the host binding is good, ensure this doesn't affect form submission buttons that might need type="submit".
apps/docs/docs/components/button/directive/_gradient-duotone.component.html (1)
1-35: LGTM! Well-structured gradient duotone buttons.The implementation is consistent and follows a clear pattern. Each button's text content accurately reflects its gradient effect.
apps/docs/docs/components/button/directive/_gradient-outline.component.html (1)
1-42: LGTM! Well-implemented gradient outline buttons.The implementation successfully combines the outline and gradient features with consistent structure.
apps/docs/docs/components/button/index.md (1)
2-3: LGTM! Clear documentation structure.The documentation is well-organized with consistent sections for each button variant.
apps/docs/docs/components/button/component.md (1)
7-9: LGTM! Clear deprecation notice implementation.Good practice to maintain deprecated documentation with clear notice.
| @Component({ | ||
| selector: 'flowbite-demo-button-pill', | ||
| imports: [ButtonComponent], | ||
| templateUrl: './_pill.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', | ||
| }, | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix component configuration and CSS class.
The component configuration needs some improvements:
- There's a typo in the host class:
flex flex wrapshould beflex flex-wrap - The component should be configured as standalone
- Consider using OnPush change detection strategy for better performance
@Component({
selector: 'flowbite-demo-button-pill',
imports: [ButtonComponent],
templateUrl: './_pill.component.html',
+ standalone: true,
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',
},
})Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Nice one on classes
For the onPush and standalone, since it's not in the library, it's not mandatory
Can you update your changes so I can create a commit (every host classes on every components if you can)
There was a problem hiding this comment.
@MGREMY Here's a comprehensive list of all components that need the class fix, grouped by feature:
Button Components
// All these files need the following change in their host configuration:
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',
apps/docs/docs/components/button/component/_default.component.ts
apps/docs/docs/components/button/component/_disabled.component.ts
apps/docs/docs/components/button/component/_gradient-duotone.component.ts
apps/docs/docs/components/button/component/_gradient-monochrome.component.ts
apps/docs/docs/components/button/component/_gradient-outline.component.ts
apps/docs/docs/components/button/component/_icon.component.ts
apps/docs/docs/components/button/component/_icon-only.component.ts
apps/docs/docs/components/button/component/_label.component.ts
apps/docs/docs/components/button/component/_outline.component.ts
apps/docs/docs/components/button/component/_pill.component.ts
apps/docs/docs/components/button/directive/_default.component.ts
apps/docs/docs/components/button/directive/_disabled.component.ts
apps/docs/docs/components/button/directive/_gradient-duotone.component.ts
apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts
apps/docs/docs/components/button/directive/_gradient-outline.component.ts
apps/docs/docs/components/button/directive/_icon.component.ts
apps/docs/docs/components/button/directive/_icon-only.component.ts
apps/docs/docs/components/button/directive/_label.component.ts
apps/docs/docs/components/button/directive/_outline.component.ts
apps/docs/docs/components/button/directive/_pill.component.tsModal Components
// These files need the following change:
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',
apps/docs/docs/components/modal/_default.component.ts
apps/docs/docs/components/modal/_dismissable.component.ts
apps/docs/docs/components/modal/_form.component.ts
apps/docs/docs/components/modal/_positioned.component.tsAlert Components
// These files need the following change:
- class: 'flex flex wrap flex-col gap-3',
+ class: 'flex flex-wrap flex-col gap-3',
apps/docs/docs/components/alert/_additional-content.component.ts
apps/docs/docs/components/alert/_border.component.ts
apps/docs/docs/components/alert/_border-accent.component.ts
apps/docs/docs/components/alert/_default.component.ts
apps/docs/docs/components/alert/_dismissable.component.ts
apps/docs/docs/components/alert/_icon.component.tsDropdown Components
// These files need the following change:
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',
apps/docs/docs/components/dropdown/_default.component.ts
apps/docs/docs/components/dropdown/_divider.component.ts
apps/docs/docs/components/dropdown/_header.component.ts
apps/docs/docs/components/dropdown/_placed.component.tsIndicator Components
// These files need the following change:
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',
apps/docs/docs/components/indicator/_default.component.ts
apps/docs/docs/components/indicator/_legend.component.tsNote: Some components like _size.component.ts have additional classes (e.g., items-center). Make sure to preserve these additional classes while fixing the flex-wrap class.
🔗 Analysis chain
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find all components with host configuration
ast-grep --pattern $'@Component({
$$$
host: {
class: $_,
},
$$$
})'
Length of output: 35037
| imports: [ButtonComponent], | ||
| templateUrl: './_size.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3 items-center', |
There was a problem hiding this comment.
Fix CSS class syntax error in host configuration.
The class flex wrap should be flex-wrap (with a hyphen).
- class: 'flex flex wrap flex-row gap-3 items-center',
+ class: 'flex flex-wrap flex-row gap-3 items-center',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3 items-center', | |
| class: 'flex flex-wrap flex-row gap-3 items-center', |
| imports: [ButtonComponent], | ||
| templateUrl: './_gradient-outline.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', |
There was a problem hiding this comment.
Fix CSS class syntax error in host configuration.
The class flex wrap should be flex-wrap (with a hyphen).
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3', | |
| class: 'flex flex-wrap flex-row gap-3', |
| imports: [ButtonComponent], | ||
| templateUrl: './_gradient-duotone.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', |
There was a problem hiding this comment.
Fix CSS class syntax error in host configuration.
The class flex wrap should be flex-wrap (with a hyphen).
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3', | |
| class: 'flex flex-wrap flex-row gap-3', |
| imports: [ButtonComponent], | ||
| templateUrl: './_gradient-monochrome.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', |
There was a problem hiding this comment.
Fix CSS class syntax error in host configuration.
The class flex wrap should be flex-wrap (with a hyphen).
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3', | |
| class: 'flex flex-wrap flex-row gap-3', |
| imports: [ButtonComponent, IconComponent], | ||
| templateUrl: './_icon.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', |
There was a problem hiding this comment.
Fix typo in host class configuration.
There's a typo in the flex-wrap class. It should be flex-wrap instead of flex wrap.
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3', | |
| class: 'flex flex-wrap flex-row gap-3', |
| imports: [ButtonComponent, BadgeComponent], | ||
| templateUrl: './_label.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', |
There was a problem hiding this comment.
Fix typo in host class configuration.
There's a typo in the flex-wrap class. It should be flex-wrap instead of flex wrap.
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3', | |
| class: 'flex flex-wrap flex-row gap-3', |
| imports: [ButtonComponent, IconComponent], | ||
| templateUrl: './_icon-only.component.html', | ||
| host: { | ||
| class: 'flex flex wrap flex-row gap-3', |
There was a problem hiding this comment.
Fix typo in host class configuration.
There's a typo in the flex-wrap class. It should be flex-wrap instead of flex wrap.
- class: 'flex flex wrap flex-row gap-3',
+ class: 'flex flex-wrap flex-row gap-3',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class: 'flex flex wrap flex-row gap-3', | |
| class: 'flex flex-wrap flex-row gap-3', |
| <button flowbite-button> | ||
| <flowbite-icon | ||
| svgIcon="outline:arrow-right" | ||
| class="h-5 w-5" /> | ||
| </button> | ||
| <button | ||
| flowbite-button | ||
| [isPill]="true"> | ||
| <flowbite-icon | ||
| svgIcon="outline:arrow-right" | ||
| class="h-5 w-5" /> | ||
| </button> | ||
| <button | ||
| flowbite-button | ||
| fill="outline"> | ||
| <flowbite-icon | ||
| svgIcon="outline:arrow-right" | ||
| class="h-5 w-5" /> | ||
| </button> | ||
| <button | ||
| flowbite-button | ||
| fill="outline" | ||
| [isPill]="true"> | ||
| <flowbite-icon | ||
| svgIcon="outline:arrow-right" | ||
| class="h-5 w-5" /> | ||
| </button> |
There was a problem hiding this comment.
Add required accessibility attributes for icon-only buttons.
Icon-only buttons must have aria-labels to be accessible to screen readers. Also consider adding tooltips for sighted users.
Apply these accessibility improvements:
<button flowbite-button
+ aria-label="Next page"
+ title="Next page">
<flowbite-icon
svgIcon="outline:arrow-right"
class="h-5 w-5" />
</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button flowbite-button> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button | |
| flowbite-button | |
| [isPill]="true"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button | |
| flowbite-button | |
| fill="outline"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button | |
| flowbite-button | |
| fill="outline" | |
| [isPill]="true"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button flowbite-button | |
| aria-label="Next page" | |
| title="Next page"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button | |
| flowbite-button | |
| [isPill]="true" | |
| aria-label="Next page" | |
| title="Next page"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button | |
| flowbite-button | |
| fill="outline" | |
| aria-label="Next page" | |
| title="Next page"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> | |
| <button | |
| flowbite-button | |
| fill="outline" | |
| [isPill]="true" | |
| aria-label="Next page" | |
| title="Next page"> | |
| <flowbite-icon | |
| svgIcon="outline:arrow-right" | |
| class="h-5 w-5" /> | |
| </button> |
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Issue Number
Issue Number: N/A
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Documentation
New Features
Improvements